CSS第一的類型適用於所有元素

Question

我試圖用第一的類型在這個佈局樣式只有第一。菜單元素...

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

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

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

 
</div>

它將背景顏色應用於所有，我在哪裏出錯？

Answer 1

:first-of-type目標特定類型的第一個孩子。由於這些元素有不同的父母，所有人都是第一個孩子。您可以通過添加類<section>，並用它爲防止這種情況：

.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>

Answer 2

這是因爲：首先使該規則適用於其父元素內類型爲的第一個元素。您需要拍攝第一部分元素，然後在樣式菜單元素，像這樣：

section:first-of-type .menu 
    { 
     background:red; 
    }