2015-11-07 25 views
0

如何才能讓藝術家在奇數行上獲得比以往行中的藝術家還要多的顏色?以下是我所擁有的屏幕截圖。使用div的其他顏色給奇數行上的項目

這裏是代碼。我也爲每位藝術家使用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"> 
 
\t <div class="img-wrapper"> 
 
\t \t <img style="height: 100px" src="https://i.scdn.co/image/8d52d583a342e3d84f6525cc429111e58dc0ff06"> 
 
\t </div> 
 
\t <p><b>P!nk</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span 
 
\t \t \t class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 1476821</p> 
 
</div> 
 
    
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"> 
 
\t \t <img style="width:100px" src="https://i.scdn.co/image/c8e2d354c5802ff0c21298b40b3f6fb3d4fd9672"> 
 
\t </div> 
 
\t <p><b>Admiral P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 69782</p> 
 
</div> 
 

 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"> 
 
\t \t <img style="width:100px" src="https://i.scdn.co/image/4500c5e5d54d80db803a6ddb0dbc81bacc4e773b"> 
 
\t </div> 
 
\t <p><b>P-Square</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 58269</p> 
 
</div> 
 

 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"> 
 
\t \t <img style="height: 100px" src="https://i.scdn.co/image/4443c21199484eed69f01996585ba4ecc118fb01"> 
 
\t </div> 
 
\t <p><b>Diddy</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span 
 
\t \t \t class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 89556</p> 
 
</div> 
 

 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/e784e3cc748a73c0e12919c591646cd6f94bfa46"></div> 
 
\t <p><b>P. Moody</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 17</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="height: 100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/666343468e2fa18535695920fec4ce1322ba8fc0"></div> 
 
\t <p><b>Kal P. Dal</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 5670</p></div> 
 
<div class="clearfix col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/840e70467d88117395010903cbdbd644870f62fb"></div> 
 
\t <p><b>P Money</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 1544</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/91dcd8ec5519f676096d5acf04e23771385f2c7d"></div> 
 
\t <p><b>Styles P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span 
 
\t \t \t class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 25757</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/8d8c1dee3b2d7ba5f3646d59efd06c741fb84900"></div> 
 
\t <p><b>P Reign</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span 
 
\t \t \t class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 18154</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/d7aed46ab444dd22498e326c0575651575599259"></div> 
 
\t <p><b>Doctor P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 81745</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/d67d56922d6acb4138e773519e4a2a4ce41e2b88"></div> 
 
\t <p><b>Jaye P. Morgan</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 105</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/6f8395caa983b78753ec3dd9cbcdae9e7a4be6c1"></div> 
 
\t <p><b>Jesse P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 186</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/661757d1cb52ad7abc263ef6c2ef64fc864a8e1f"></div> 
 
\t <p><b>Professor P &amp; DJ Akilles</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 1689</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="height: 100px" src="assets/images/ongekend persoon.png"></div> 
 
\t <p><b>P-Bros</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 588</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="height: 100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/3f31c5dddae63b3d5698f12c05564a45ebdc8240"></div> 
 
\t <p><b>P-Danjelsa</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 721</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="height: 100px" src="assets/images/ongekend persoon.png"></div> 
 
\t <p><b>Onkl P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 1032</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/a423666132155db0b99d359696dea1be70a99eb0"></div> 
 
\t <p><b>Professor P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 249</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="height: 100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/0f70ba42f2b62b176e369616b185274887821d80"></div> 
 
\t <p><b>Ska-P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span 
 
\t \t \t class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 170185</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="width:100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/cdfd50fd6384ad50660a1b29e1a05bc89b941f61"></div> 
 
\t <p><b>David P.</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 257</p></div> 
 
<div class="col-md-4 artist"> 
 
\t <div class="img-wrapper"><img style="height: 100px" 
 
\t \t \t \t \t \t \t \t src="https://i.scdn.co/image/5728b492898e97b8a82fcf8de2374c0190387354"></div> 
 
\t <p><b>Crazy P</b></p> 
 

 
\t <p><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></p> 
 

 
\t <p>Volgers op Spotify: 12852</p></div>

切換的片斷全屏幕上看到的最好結果

任何人都可以說,我能做些什麼?

回答

1

從每6倍-n個元件,每一個第四,第五和第六元件:

.artist:nth-child(6n+4), 
.artist:nth-child(6n+5), 
.artist:nth-child(6n+6) { 
    background-color: #cecece; 
} 

https://jsfiddle.net/arw0udvd/1/

相關問題