如何選擇所選僞類的僞類？

Question

我有一個由行組成的容器。每一行都有一個徽標元素，我希望徽標背景像棋盤一樣。下面是一排的一個樣本：

.content-designers .designers > .row > .logo > span{ 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}  
 
.content-designers .designers .row :nth-child(odd) .logo:nth-child(odd){ 
 
    background: #f4f4f4; 
 
}  
 
.content-designers .designers .row :nth-child(odd) .logo:nth-child(even){ 
 
    background: #fff; 
 
} 
 
.content-designers .designers .row :nth-child(even) .logo:nth-child(odd){ 
 
    background: #fff; 
 
} 
 
.content-designers .designers .row :nth-child(even) .logo:nth-child(even){ 
 
    background: #f4f4f4; 
 
}

<div class="content-designers"> 
 
    <div class="designers"> 
 
    <div class="row"> 
 
     <div class="logo"> \t 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> \t 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> \t 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> \t 
 
     <span></span> 
 
     <img src=""> 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div>

的選擇似乎不工作。這裏有什麼問題？

Answer 1

你將需要刪除的空間:nth-child選擇和使用display: inline-block爲row logo而不是跨度。默認情況下，row logo充當塊級別元素，並將新行對齊到新行。

.content-designers .designers > .row > .logo > span { 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 
.content-designers .designers .row .logo { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
.content-designers .designers .row:nth-child(odd) .logo:nth-child(odd) { 
 
    background: #f4f4f4; 
 
} 
 
.content-designers .designers .row:nth-child(odd) .logo:nth-child(even) { 
 
    background: #fff; 
 
} 
 
.content-designers .designers .row:nth-child(even) .logo:nth-child(odd) { 
 
    background: #fff; 
 
} 
 
.content-designers .designers .row:nth-child(even) .logo:nth-child(even) { 
 
    background: #f4f4f4; 
 
}

<div class="content-designers"> 
 
    <div class="designers"> 
 
    <div class="row"> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您的選擇器中有空格。您的每一個選擇的拆除.row :nth-child空間：

.content-designers .designers > .row > .logo > span{ 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
}  
.content-designers .designers .row:nth-child(odd) .logo:nth-child(odd){ 
    background: #f4f4f4; 
}  
.content-designers .designers .row:nth-child(odd) .logo:nth-child(even){ 
    background: #fff; 
} 
.content-designers .designers .row:nth-child(even) .logo:nth-child(odd){ 
    background: #fff; 
} 
.content-designers .designers .row:nth-child(even) .logo:nth-child(even){ 
    background: #f4f4f4; 
} 

Answer 3

在CSS代碼，你寫.row :nth-child(even)，與空間。正確的語法是.row:nth-child(even)無空格。

.content-designers .designers > .row > .logo > span{ 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
.content-designers .designers .row:nth-child(odd) .logo:nth-child(odd){ 
 
    background: #f4f4f4; 
 
} 
 
.content-designers .designers .row:nth-child(odd) .logo:nth-child(even){ 
 
    background: #fff; 
 
} 
 
.content-designers .designers .row:nth-child(even) .logo:nth-child(odd){ 
 
    background: #fff; 
 
} 
 
.content-designers .designers .row:nth-child(even) .logo:nth-child(even){ 
 
    background: #f4f4f4; 
 
}

<div class="content-designers"> 
 
    <div class="designers"> 
 
    <div class="row"> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo">  
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo">  
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
     <div class="logo"> 
 
     <span></span> 
 
     <img src=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>