Question

我需要改变第1，第4和第4的背景颜色。班级cover-inner

每隔5个div

我试过了，但它无法正常工作

.cover-wrapper .cover-inner:nth-of-type(4n+4) {
    background-color: yellow;
}
.cover-wrapper .cover-inner:nth-of-type(4n+5) {
     background-color: orange;
}

实际小提琴http://jsfiddle.net/gfLPG/1/

Answer 1

将nth-of-type()放在.cover-wrapper上：

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

因为每个.cover-inner是其父母的唯一孩子，所以你永远不会捕捉到它。

附注：

使用:nth-of-type(4n)代替:nth-of-type(4n+4)
如果您想更改每个第5个元素的颜色（目前，您正在更改每个第4个+ 1元素的颜色），请使用:nth-of-type(5n)
使用:nth-of-type(1)或:first-of-type()定位第一个元素

Answer 2

试一试： -

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

<强> DEMO

Answer 3

.cover-wrapper只有一个孩子。因此，使用.cover-inner类在.cover-wrapper中给第n个孩子没有任何意义。

而不是它你可以使用：nth-child with .cover-wrapper

.cover-wrapper{height:20px; width:200px; background-color:blue;margin:10px;}
			.cover-wrapper:first-child .cover-inner {
			    background-color: green;
			}
			.cover-wrapper:nth-of-type(4n+4) .cover-inner {
			    background-color: yellow;
			}
			.cover-wrapper:nth-of-type(4n+5) .cover-inner {
			     background-color: orange;
			}

<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div class="cover-wrapper"><div class="cover-inner"><div>Image Item</div></div></div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>

如何更改第n个div的背景颜色

3 个答案: