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

web开发作者:dayu日期:5天前点击:1

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选择器实现斑马线显示

原文地址:http://www.cnblogs.com/paranoidCAT/p/7193899.html


下一篇       上一篇