如何使用純CSS獲取HTML中的樹

Question

我正在嘗試關注此tutorial以及這裏的my code到目前爲止。

本教程的結尾顯示分支中的最後一個節點後面沒有任何豎線。但我不能這樣工作！任何想法，如果我做錯了什麼，或者教程缺少一些東西！

我甚至嘗試瞭如教程中所示的last-child僞類，但得到了相同的結果。

Answer 1

可悲的是，僞類是在即將到來的CSS3規範，並在目前幾個網頁瀏覽器定義的支持。

它寫在教程的最後。也許這就是它不起作用的原因。

Answer 2

我相信我已經固定它：https://github.com/gurjeet/CSSTree/pull/1

我修改了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; 
} 

Answer 3

下面是僅使用僞元素和邊界一試：

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（編輯）

Answer 4

謝謝你們，這讓我有幫助的答案閱讀更多一些，最後我讀this article並刪除了對JavaScript的所有依賴，並使用nth-last-of-type僞選擇器將特殊背景應用於列表中的最後一個li項（忽略最後一個li之後的ul）。

最終代碼是here。我會接受我自己的答案，除非有人指出它有什麼問題。 （我不認爲現階段與舊瀏覽器的兼容性對我來說很重要。）

感謝@Aram的回答。 @OneTrickPony，你的回答是通過這個noob的頭:)我確信它做對了，但對我來說有點複雜。

<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; 
}