Question

我有下面的html，在我的CSS中我写了.CommentSection :nth-child(5n)

而不是每个第5个评论框被更改li。隐藏正在更改其他元素。我如何才能使仅直接孩子（总是div class="comment"）被计算并应用于其子女而不计算其中？

<div class="CommentSection">
  <div class="comment" id="c19">
    <ul>
        <li class="username">a</li>
        <li class="date">3/2/2010 6:14:51 AM</li>
        <li class="link"><a href="http://localhost:1223/u/a#c19">Permalink</a></li>
        <li class="flag">Flag</li>
        <li class="Hide"><a href="http://localhost:1223/u?hide=1&amp;t=8&amp;c=19&amp;ret=/u/a">Hide</a></li>
        <li class="delete">Delete</li>
        <li class="reply">Reply</li>
    </ul>

    <div class="text">
      <p>asd</p>
    </div>
  </div>
...
</div>

Answer 1

.CommentSection > :nth-child(5n)或.CommentSection .comment:nth-child(5n)

Answer 2

试试这个：

.CommentSection > div.comment:nth-child(5n)

这将使用 CommentSection 的直接子项 comment 选择每隔5 DIV。

Answer 3

试试这个

.CommentSection .comment:nth-child(5n){
  […]
}

或更具体：

.CommentSection > .comment:nth-child(5n) {
  […]
}

这应该也可以正常工作：

.CommentSection > :nth-child(5n) {
  […]
}

如何使用只有直接孩子的n-child？

3 个答案: