CSS3新增了一些选择符,可以更好的选择和控制HTML元素,这篇文章将介绍其中的一些。
/* 1. :nth-child(n)选择器 */ p:nth-child(2) { color: red; }
:nth-child(n)选择器可以选中父元素的第n个子元素,可以是一个具体的数字,也可以是一个公式。如上述代码会选中文档中的第二个p元素并将字体变成红色。
/* 2. :nth-last-child(n)选择器 */ p:nth-last-child(2) { font-size: 20px; }
:nth-last-child(n)选择器也是选中父元素的第n个子元素,但是是从后往前计数。例如,上述代码会选中文档中倒数第二个p元素并将字体大小设置为20px。
/* 3. :first-child选择器 */ p:first-child { background-color: gray; }
:first-child选择器就单纯的选中父元素的第一个子元素,如上述代码选中的是文档中第一个p元素,并将其背景色改变成了灰色。
/* 4. :last-child选择器 */ p:last-child { border: 1px solid black; }
:last-child选择器则是选中父元素的最后一个子元素,如上述代码选中的是文档中最后一个p元素,并给其添加了黑色的边框。
这些新增的选择器可以让我们更加方便的选择并控制HTML元素,让CSS样式更加灵活、强大。