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

2021-06-19 06:03

阅读：671

标签：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

上一篇：js基础③

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS3的nth-child选择器实现斑马线显示
文章链接：http://soscw.com/index.php/essay/95820.html

亲，登录后才可以留言！