关于CSS中nth-child有层级嵌套的情况

CSS中nth-child和nth-of-type的区别，请别处查找了解。

nth-child有嵌套的情况，用代码和图说明。

:nth-child(odd)

<style>
div:nth-child(odd){
    color:red
}
</style>

<div>1.1--第1层，第1个,奇数
    <div>2.1--1.1的第2层，第1个,奇数</div>
</div>
<div>1.2</div>
<div>1.3--第1层，第3个,奇数</div>
<div>1.4
    <div>2.2--1.4的第2层，第1个，奇数，子元素都受影响
        <div>3.1</div>
        <p>ppp</p>
    </div>
    <div>2.3</div>
</div>

结果：

:nth-child(even)

<style>
div:nth-child(even){
    color:red
}

<div>1.1
    <div>2.1</div>
</div>
<div>1.2--第1层，第2个，偶数</div>
<div>1.3</div>
<div>1.4--第1层，第4个，偶数，子元素都受影响
    <div>
        <div>3.1</div>
        <p>ppp</p>
    </div>
    <div>2.3</div>
</div>

结果：

原则

• 宽度优先遍历文档。
• 父级处理完，再继续遍历子孙级。
• 如果被选中，子孙元素都受影响。同时子孙元素都再遍历处理。

技巧

推荐阅读