第n个孩子，我有一个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; 
}

，但我不能把两个伪元素那样，我已经测试过它（不工作），也尝试了一些其他方法，但没有设法弄清楚。

我敢肯定的作品。你到底面临什么问题？ – BoltClock 2012-03-23 21:47:50

这是有效的，但是当前的实现可能无法正确解释它。 – jwueller 2012-03-23 21:49:21

以下作品：http://jsfiddle.net/9KkeK/。所以你的问题在别处。 – 2012-03-23 21:50:42

答

:nth-child()不会按类或任何东西进行过滤。在您的代码中，您的第一个ul.sub-comment不是#comments-wrapper中的第一个孩子，所以它不起作用。

相反，使用this selector technique和反转的height和margin-top方式如下：

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)（或:first-child为此事），使用兄弟选择与另一个ul.sub-comment申请原来的样式以后的所有ul.sub-comment元素之后的第一个。

Updated fiddle（也倒了background-color样式，以便第一个呈蓝色）

非常感谢！ :) – Kristjan 2012-03-23 22:12:00

第n个孩子，我有一个CSS问题之前

相关推荐