首页 > 代码库 > CSS3的nth-child选择器实现斑马线显示

CSS3的nth-child选择器实现斑马线显示

nth-child选择器:通过选择一个一个标签来定义其父标签范围内所有同类表现的属性。

例如:

div:nth-child(2)
{
background:#ffffff;
}

可以设置该div所在的父标签内第二个div的背景色为黑色。

 

通过这一选择器我们可以实现同一级div的不同样式变化:

.topic:nth-child(odd) {
    background: #FFF0CD;
}

.topic:nth-child(even) {
    background: #FFF8E7;
}

odd和even是父级元素标签下选择单数个子标签和偶数个子标签的关键字,这个样式表定义了class为topic的子标签单数显示为明黄色,双数显示为暗黄色。

CSS3的nth-child选择器实现斑马线显示