如何正確訪問CSS子項？

Question

如果我想改變的第一個2 <div>背景在這個HTML代碼中的「主」 <div>

HTML

<div class="main"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 

這是做到這一點的最優化的方式裏面？

CSS

.main div:nth-of-type(1), 
.main div:nth-of-type(2) { 
    background: #000; 
} 

Answer 1

您可以nth-child設置範圍。要從一個位置開始（由最後一部分+ 2定義）並選擇所有後續的孩子，請使用n，如果要選擇位置前的所有元素，請使用-n。 （包含兩種情況）。

關於nth-childhere的更多提示和技巧。

.main div:nth-of-type(-n+2) { 
 
    background: #000; 
 
}

<div class="main"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div>