n番目の子と

Question

前に、私はCSSの問題を抱えているが、私はこの

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:67px; 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-36px; 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment:nth-child(1):before { 
    height:37px; 
    margin-top:-6px; 
} 

を達成する必要がありますが、私はそのような2つの擬似要素を置くことができない、と私はそれをテストしてみました仕事）、 もいくつかの方法を試しましたが、それを把握することはできませんでした。

Answer 1

:nth-child()は、クラスなどでフィルタリングしません。あなたのコードでは、最初のul.sub-commentは#comments-wrapperの最初の子ではないので、動作しません。

代わりに、this selector techniqueを使用すると、以下のようにあなたのheightとmargin-topスタイルを反転：（そのことについてまたは:first-child）

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:37px; /* was 67px in your code */ 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-6px; /* was -36px in your code */ 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before { 
    height:67px; /* was 37px in your code */ 
    margin-top:-36px; /* was -6px in your code */ 
} 

基本的に

、代わりの:nth-child(1)を、オリジナルのスタイルを適用するために、別のul.sub-commentと兄弟セレクタを使用すべての後続のul.sub-comment要素の最初の部分の後に。

Updated fiddleは、私はそれが動作しますかなり確信している