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>
结果:
原则
- 宽度优先遍历文档。
- 父级处理完,再继续遍历子孙级。
- 如果被选中,子孙元素都受影响。同时子孙元素都再遍历处理。