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; 
    }