CSS3引入了新的结构伪类,如
:nthchild()
、:firstchild
和:lastchild
等,它们允许开发者根据元素在文档中的位置选择元素。这些伪类增强了样式的应用范围,使得无需添加额外的class或id即可对特定位置的元素应用样式。<style>
(图片来源网络,侵删)
ul li:firstchild {
color: red;
}
ul li:lastchild {
color: blue;
(图片来源网络,侵删)
}
ul li:nthchild(2) {
backgroundcolor: #f2f2f2;
}
ul li:nthchild(odd) {
(图片来源网络,侵删)
fontweight: bold;
}
ul li:nthchild(even) {
textdecoration: underline;
}
</style>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
</ul>