我怎样才能给奇数行的艺术家一个不同于永远行的艺术家的颜色？下面是我所拥有的屏幕截图。
这是代码。我还为每个艺术家使用 bootstrap 和 div。
.col-md-4 {
width: 33.3333%;
float: left;
position: relative;
min-height: 1px;
}
.img-wrapper {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 100%;
float: left;
margin: 5px;
}
.img-container {
height: 100px;
}
.artist:nth-child(6n),
.artist:nth-child(5n),
.artist:nth-child(4n) {
background-color: #cecece;
}<div class="col-md-4 artist">
<div class="img-wrapper">
<img style="height: 100px" src="https://i.scdn.co/image/8d52d583a342e3d84f6525cc429111e58dc0ff06">
</div>
<p><b>P!nk</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
class="fa fa-star"></span></p>
<p>Volgers op Spotify: 1476821</p>
</div>
<div class="col-md-4 artist">
<div class="img-wrapper">
<img style="width:100px" src="https://i.scdn.co/image/c8e2d354c5802ff0c21298b40b3f6fb3d4fd9672">
</div>
<p><b>Admiral P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 69782</p>
</div>
<div class="col-md-4 artist">
<div class="img-wrapper">
<img style="width:100px" src="https://i.scdn.co/image/4500c5e5d54d80db803a6ddb0dbc81bacc4e773b">
</div>
<p><b>P-Square</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 58269</p>
</div>
<div class="col-md-4 artist">
<div class="img-wrapper">
<img style="height: 100px" src="https://i.scdn.co/image/4443c21199484eed69f01996585ba4ecc118fb01">
</div>
<p><b>Diddy</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
class="fa fa-star"></span></p>
<p>Volgers op Spotify: 89556</p>
</div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/e784e3cc748a73c0e12919c591646cd6f94bfa46"></div>
<p><b>P. Moody</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 17</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="height: 100px"
src="https://i.scdn.co/image/666343468e2fa18535695920fec4ce1322ba8fc0"></div>
<p><b>Kal P. Dal</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 5670</p></div>
<div class="clearfix col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/840e70467d88117395010903cbdbd644870f62fb"></div>
<p><b>P Money</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 1544</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/91dcd8ec5519f676096d5acf04e23771385f2c7d"></div>
<p><b>Styles P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
class="fa fa-star"></span></p>
<p>Volgers op Spotify: 25757</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/8d8c1dee3b2d7ba5f3646d59efd06c741fb84900"></div>
<p><b>P Reign</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
class="fa fa-star"></span></p>
<p>Volgers op Spotify: 18154</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/d7aed46ab444dd22498e326c0575651575599259"></div>
<p><b>Doctor P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 81745</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/d67d56922d6acb4138e773519e4a2a4ce41e2b88"></div>
<p><b>Jaye P. Morgan</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 105</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/6f8395caa983b78753ec3dd9cbcdae9e7a4be6c1"></div>
<p><b>Jesse P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 186</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/661757d1cb52ad7abc263ef6c2ef64fc864a8e1f"></div>
<p><b>Professor P & DJ Akilles</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 1689</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="height: 100px" src="assets/images/ongekend persoon.png"></div>
<p><b>P-Bros</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 588</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="height: 100px"
src="https://i.scdn.co/image/3f31c5dddae63b3d5698f12c05564a45ebdc8240"></div>
<p><b>P-Danjelsa</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 721</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="height: 100px" src="assets/images/ongekend persoon.png"></div>
<p><b>Onkl P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 1032</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/a423666132155db0b99d359696dea1be70a99eb0"></div>
<p><b>Professor P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 249</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="height: 100px"
src="https://i.scdn.co/image/0f70ba42f2b62b176e369616b185274887821d80"></div>
<p><b>Ska-P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span
class="fa fa-star"></span></p>
<p>Volgers op Spotify: 170185</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="width:100px"
src="https://i.scdn.co/image/cdfd50fd6384ad50660a1b29e1a05bc89b941f61"></div>
<p><b>David P.</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 257</p></div>
<div class="col-md-4 artist">
<div class="img-wrapper"><img style="height: 100px"
src="https://i.scdn.co/image/5728b492898e97b8a82fcf8de2374c0190387354"></div>
<p><b>Crazy P</b></p>
<p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p>
<p>Volgers op Spotify: 12852</p></div>在全屏模式下切换片段以查看最佳结果
谁能说说我能做什么？
最佳答案
从每六次第n个元素开始，每第四、第五和第六个元素:
.artist:nth-child(6n+4),
.artist:nth-child(6n+5),
.artist:nth-child(6n+6) {
background-color: #cecece;
}
关于html - 使用 div 为奇数行的元素赋予其他颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33585595/