2 
<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 会受此样式表规则的影响，即使它没有兄弟元素并且是父元素的唯一子元素？

4

4 回答 4

6

由于<style>元素，外部<div> 确实匹配选择器。:nth-child是 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

您可以使用更具体的选择器来解决这个问题，也可以选择使用更具体的 HTML。

于 2013-09-02T18:47:29.920 回答
2

正如@MattBall 所说：

（示范：）

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

http://jsfiddle.net/hd4xy/ 用分离的css。

更新 如果您不想或无法分离样式，请考虑div在 css 规则中添加额外的内容。

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

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

于 2013-09-02T18:50:15.020 回答
1

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

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

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

于 2013-09-02T19:45:27.213 回答
0

外部 div 是文档中的第八个兄弟。这意味着 nth-child( 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>
于 2013-09-02T19:33:33.017 回答