css - 第 n 个 child 及之前

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

Updated fiddle (还反转了 background-color 样式，所以第一个保持蓝色)