淘先锋技术网

首页 1 2 3 4 5 6 7

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及以下版本的浏览器。