受nth-child影响的父元素()

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是1索引的,所以nth-child(3n+2)匹配索引2(n = 0),5(n = 1),8(n = 2),...的元素,并且<style>HTML中存在该标记意味着父级<div>确实在索引2(记住,我们从1开始计数).

看看移动<style>标签时会发生什么:http://cssdesk.com/PEBpL

您可以使用更具体的选择器来解决此问题,也可以选择使用更具体的HTML.