CSS首個型停止增加新的部分類

Question

從以前的答案繼後的工作，我使用的首個型爲目標的第一menuSection這樣的...

.menuSection:first-of-type { 
 
    background: red; 
 
}

<div id="container"> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 

 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
</div>

這工作正常，但是當我扔在它停止工作，不同類別的一些額外的部分......

.menuSection:first-of-type { 
 
    background: red; 
 
}

<div id="container"> 
 

 
    <section class="new_menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    
 
    <section class="new_menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 

 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
</div>

任何人都知道我要去哪裏錯了？

Answer 1

的first-of-type選擇可惜不指類的第一次亮相，但標籤型的，你的情況section。因此，與類選擇器結合使用時，不會在您的示例中選擇任何內容。

如果您知道將會有多少節，您可以使用沒有類的section:nth-of-type(x)（請參見下面的示例），但除此之外，唯一的解決方法是將一個單獨的類分配給該節並在選擇器中使用該節。

section:nth-of-type(2) { 
 
    background: red; 
 
}

<div id="container"> 
 

 
    <section class="new_menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    
 
    <section class="new_menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 

 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
</div>

Answer 2

重related question，但因爲它不是直觀的，我會發佈一個答案。要認識到的重要一點是:first-of-type僞選擇器適用於類型這意味着它會查看元素（即div,p等）並取而代之。需要注意的另一個重要的事情是，它看起來在兄弟姐妹

的：首個型CSS僞類代表其類型的一組兄弟元素中的第一個元素。

您正在嘗試使用來上課做，所以它在做什麼時說：「好吧，你想的.menuSection所有項目，以便讓我看看類型幕後 - 好吧，這是一個div所以讓我嘗試抓住第一個divs，如果它有一個類menuSection我要去應用這種風格

爲了更清楚地說明這一點 - 在你的例子中你有new_menuSection作爲一個單獨的風格，你是想知道爲什麼這種風格不適用於第一個.menuSection。正如我所說，它看起來類型，所以如果你改變你的.new_menuSection的類型爲另一個元素，它的作品預計。

.menuSection:first-of-type { 
 
    background: red; 
 
}

<div id="container"> 
 
    <div class="new_menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 

 
    <section class="menuSection"> 
 
    <div> 
 
     <ul class="menu"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     </ul> 
 
    </div> 
 
    </section> 
 
</div>