CSS3中引入了下标选择器,使用“:nth-child(n)”表示。其中n为数字,表示要选择的第n个子元素。
例如,要选择父元素的第3个子元素,可以使用:
父元素: nth-child(3) { /* CSS规则 */ }
下标选择器可以很方便地用来改变不同下标的子元素的样式。例如:
ul:nth-child(odd) { background-color: #f2f2f2; } ul:nth-child(even) { background-color: #ddd; }
上面的代码将使得列表的奇数行和偶数行背景色不同。
需要注意的是,下标选择器中的n是从1开始的,而不是从0开始。如果要选择第一个子元素,可以使用“:first-child”选择器。
下标选择器还可以与其他选择器一起使用。例如:
ul li:nth-child(3n) { /* CSS规则 */ }
上面的代码将选择每个ul元素下的第3、6、9、12个li子元素。
下标选择器对于布局和样式设计来说非常有用,但需要注意的是,该选择器不适用于IE8及以下版本的浏览器。