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

但我不能放两个这样的伪元素，我测试过它（不起作用），还尝试了一些其他的方法，但没有设法解决它。

Answer 1

: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元素< em>在第一个之后。

Updated fiddle（也颠倒了background-color样式，因此第一个样式保持蓝色）

n-child和之前

1 个答案: