码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-07-17 14:06:29      阅读:788      评论:0      收藏:0      [点我收藏+]

标签:nbsp   标签   back   范围   div   样式表   log   通过   css3   

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

标签:nbsp   标签   back   范围   div   样式表   log   通过   css3   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!