純粋なCSSを使用してHTMLでツリーを取得する方法

Question

これまでのところ、tutorialとなっています。ここではmy codeです。

最後に、ブランチの最後のノードには、その後に縦棒が付きません。しかし、私はそれをそのように働かせることができませんでした！私が間違って何かをしている場合、または何かチュートリアルが何かを欠けている任意のアイデア！

チュートリアルのように：last-childの擬似クラスを試しましたが、同じ結果が得られました。悲しいことに

Answer 1

、疑似クラスは、今後のCSS3仕様で、いくつかのWebブラウザがそれをサポートする現時点で定義されます。

これはチュートリアルの最後に書かれています。たぶんそれがうまくいかない理由です。

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