小编Har*_*n K的帖子

在 CSS 中使用 nth-child 重复相同的颜色顺序?

演示: http: //jsfiddle.net/Nwf2A/57/

nth-child我在使用伪类显示颜色顺序时遇到问题。

第一组 4div以正确的顺序显示正确的颜色,但我希望第二组和第三组显示相同的颜色顺序。

下面是我的 HTML 和 CSS;

HTML:

<div> </div><div> </div><div> </div><div> </div>
<br>
<div> </div><div> </div><div> </div><div> </div>
<br>
<div> </div><div> </div><div> </div><div> </div>
Run Code Online (Sandbox Code Playgroud)

CSS:

div {height: 20px;margin: 5px;}
div:nth-child(1n) {background: blue;}
div:nth-child(2n) {background: red;}
div:nth-child(3n) {background: green;}
div:nth-child(4n) {background: black;}
Run Code Online (Sandbox Code Playgroud)

html css css-selectors

4
推荐指数
1
解决办法
5295
查看次数

标签 统计

css ×1

css-selectors ×1

html ×1