javascript 如何使用纯 CSS 获取 HTML 中的树
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14922247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a tree in HTML using pure CSS
提问by Gurjeet Singh
I am trying to follow this tutorialand here's my codeso far.
The end of the tutorial shows that the last nodes in a branch won't have any vertical bars after it. But I couldn't get it working that way!. Any ideas if I am doing something wrong, or maybe the tutorial is missing something!
本教程的结尾显示分支中的最后一个节点后面不会有任何竖线。但我无法让它以这种方式工作！如果我做错了任何想法，或者教程可能遗漏了一些东西！
I tried even the :last-child pseudo class as shown in the tutorial, but got the same result.
我什至尝试了教程中所示的 :last-child 伪类，但得到了相同的结果。
回答by nice ass
Here's a try using only pseudo-elements and borders:
这是仅使用伪元素和边框的尝试：
ul, li{
position: relative;
}
/* chop off overflowing lines */
ul{
overflow: hidden;
}
li::before, li::after{
content: '';
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
li::before{
border-top: 1px solid #333;
top: 10px;
width: 10px;
height: 0;
}
/* vertical line on list items */
li::after{
border-left: 1px solid #333;
height: 100%;
width: 0px;
top: -10px;
}
/* lower line on list items from the first level
because they don't have parents */
.tree > li::after{
top: 10px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after{
display:none;
}
demo(edited)
演示（已编辑）
回答by Siddharth Gupta
Sadly, the pseudo-class is defined in the upcoming CSS3 specification and at the moment few web browsers support it.
遗憾的是，伪类是在即将发布的 CSS3 规范中定义的，目前很少有 Web 浏览器支持它。
It's written at the end of the tutorial. Maybe that's the reason it's not working.
它写在教程的最后。也许这就是它不起作用的原因。
回答by Aram Kocharyan
I believe I've fixed it: https://github.com/gurjeet/CSSTree/pull/1
我相信我已经修复了它：https: //github.com/gurjeet/CSSTree/pull/1
I modified the CSS to remove the background and changed margin to padding.
我修改了 CSS 以删除背景并将边距更改为填充。
ul.tree, ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.tree ul {
padding-left: 1em;
background: url(vline.png) repeat-y;
}
ul.tree li {
margin:0;
padding: 0 1.2em;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}
/* The #fff color background is to hide the previous background image*/
ul.tree li.last {
background: #fff url(lastnode.png) no-repeat;
}
ul.tree ul:last-child {
background: none;
}
回答by Gurjeet Singh
Thank you guys, helpful answers which made me read some more, and finally I read this articleand removed all dependency on JavaScript, and used the nth-last-of-typepseudo-selector to apply the special background to the last li items in a list (ignoring the ul that comes after the last li).
谢谢你们，有用的答案让我读了更多，最后我读了 这篇文章并删除了对 JavaScript 的所有依赖，并使用nth-last-of-type伪选择器将特殊背景应用于列表中的最后 li 项（忽略在最后一个 li 之后）。
The final code is here. I am going to accept my own answer, unless someone points out some problem with it. (I don't think compatibility with older browsers matters to me at this stage.)
最终代码在这里。我将接受我自己的答案，除非有人指出它的一些问题。（我认为现阶段与旧浏览器的兼容性对我来说并不重要。）
Thanks to @Aram for the answer. @OneTrickPony, your answer went over the head of this noob :) I am sure it does the right thing, but it's a bit too complicated for me.
感谢@Aram 的回答。@OneTrickPony，你的回答超出了这个菜鸟的头脑:) 我相信它做对了，但对我来说有点太复杂了。
<style type="text/css">
/* ul[class=tree] and every ul under it loses all alignment, and bullet
* style.
*/
ul.tree, ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
/* Every ul under ul[class=tree] gets an indent of 1em, and a background
* image (vertical line) applied to all nodes under it (repeat-y)
*/
ul.tree ul {
padding-left: 1em;
background: url(vline.png) repeat-y;
}
/* ... except the last ul child in every ul; so no vertical lines for
* the children of the last ul
*/
ul.tree ul:last-child {
background: none;
}
/* Every li under ul[class=tree]
* - gets styling to make it bold and blue, and indented.
* - gets a background image (tilted T), to denote that its a node
* - sets height to match the height of background image
*/
ul.tree li {
margin:0;
padding: 0 1.2em;
background: url(node.png) no-repeat;
line-height: 20px;
color: #369;
font-weight: bold;
}
/* The last li gets a different background image to denote it as the
* end of branch
*/
ul.tree li:nth-last-of-type(1) {
background: url(lastnode.png) no-repeat;
}
