Question

<style type="text/css">
 <!--    
    div:nth-child( 3n + 2 ) { background-color: green }
 -->
</style>

<div>
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
</div>

为什么外部div受此样式表规则的影响，即使它没有兄弟并且是父元素的唯一子元素？

Answer 1

由于<style>元素，外部<div> 确实与选择器匹配。 :nth-child is 1-indexed，所以nth-child(3n+2)匹配索引2（n = 0），5（n = 1），8（n = 2），......的元素以及<style>的存在HTML中的标记意味着父<div>确实在索引2处（记住，我们从1开始计数）。

查看移动<style>代码时会发生什么：http://cssdesk.com/PEBpL

您可以使用more-specific selector解决此问题，可选择使用more-specific HTML as well.

Answer 2

正如@MattBall所说：

（演示：）

http://jsfiddle.net/pbMM8/ 文档中包含style元素。

http://jsfiddle.net/hd4xy/ 与分离的CSS。

<强>更新如果你不想或不能分开风格，考虑在css规则中添加额外的div。

div div:nth-child( 3n + 2 ) { background-color: green }

正如您所见： http://jsfiddle.net/J8SQJ/

Answer 3

任何有效的HTML文档都不会出现此问题。但是，如果您的文档包含<style>标记之前的任何非空白内容，那么事情就会发生变化。此类内容隐式关闭head元素并启动body元素。然后将style元素视为body的第一个子元素（这是无效的HTML，但在实践中工作得很好），使您的div成为第二个孩子，从而匹配selector div:nth-child( 3n + 2 )（对于n = 0）。

解决方案是修复HTML语法，以便style位于head元素中。使用http://validator.w3.org检查语法。

除此之外，将一个类或id属性分配给外部div更安全，比如<div class=foo>，并使用.foo > :nth-child(3n+2)之类的选择器，它匹配特定类中元素的特定子元素。

Answer 4

外部div是文档中的第八个sibbling。这意味着第n个孩子（3n + 2）正确应用。

<body>

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

<ul></ul>

<table></table>

<div>
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
</div>

</body>

受nth-child影响的父元素（）

4 个答案: