[英]How to use nth-child with only direct children?
I have this the html below and in my CSS I write .CommentSection :nth-child(5n)
我有这个下面的html和我写的
.CommentSection :nth-child(5n)
Instead of every 5th comment box being changed li .Hide is being changed an other elements. 而不是每个第5个评论框被改变li。隐藏正在改变其他元素。 How do I make it so only the direct children (always
div class="comment"
) are counted and applied to and not counting its children? 我如何才能这样做只有直接的孩子(总是
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&t=8&c=19&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>
.CommentSection > :nth-child(5n)
或.CommentSection .comment:nth-child(5n)
Try this: 试试这个:
.CommentSection > div.comment:nth-child(5n)
This will select every 5th DIV
with the class comment that is a direct child of CommentSection . 这将使用CommentConction的直接子项类注释选择每第5个
DIV
。
Try this 试试这个
.CommentSection .comment:nth-child(5n){
[…]
}
Or more specific: 或者更具体:
.CommentSection > .comment:nth-child(5n) {
[…]
}
This should work fine as well: 这应该也可以正常工作:
.CommentSection > :nth-child(5n) {
[…]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.