CSS3-nth-child() 选择器的使用

你的名字 2023-08-17 16:47 131阅读 0赞

`:nth-child(n)` 选择属于其父元素的第 n 个子元素；n 可以是一个数字，一个关键字，或者一个公式

相对于父级做参考，选择所有子元素中匹配元素的奇数子元素；被选中的元素符合匹配条件且为奇数个的元素

.dl_box dd:nth-child(odd){ 
    	color: skyblue;
    }

相对于父级做参考，选择 所有子元素中匹配元素的偶数子元素

.dl_box dd:nth-child(even){ 
    	color: red;
    }

HTML 代码：

![在这里插入图片描述][20190929153120691.png]  
相对于父级做参考，选择所有子元素中匹配的第 n 个子元素；n 从 零开始自加，第 零 个元素或超出了元素的个数时会被忽略

.dl_box dd:nth-child(n){ 
    	color: yellow;
    }

![在这里插入图片描述][20190929153514244.png]  
相对于父级做参考，选择所有子元素中匹配的元素且该元素为第 2 个子元素

.dl_box dd:nth-child(2) { 
    	color: blue;
    }

![在这里插入图片描述][20190929160500519.png]  
相对于父级做参考，选择 所有子元素中匹配元素的偶数子元素

ul li:nth-child(2n) { 
    	color: green;
    }

![在这里插入图片描述][20191001205152617.png]

[20190929153120691.png]: /images/20230809/67eef8b7547d4eb684f8b3be58bdeb66.png
[20190929153514244.png]: /images/20230809/6474230506c14dcc89f34a409c8189a5.png
[20190929160500519.png]: /images/20230809/a1b1374a4eeb4240a083a8533099cd4d.png
[20191001205152617.png]: /images/20230809/bcde4bec5c8e433c87cf7fb21ba8531d.png