首页 > 代码库 > 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选择器实现斑马线显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。