CSS first-of-type适用于所有元素

Question

我正在尝试使用first-of-type来设置此布局中的第一个.menu元素...

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

它将背景颜色应用于所有人，我哪里出错了？

Answer 1

这是因为：first-of-type使规则适用于其父元素中类型中的第一个元素。您需要捕获第一个section元素，然后像这样设置菜单元素的样式：

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

Answer 2

:first-of-type针对特定类型的第一个孩子。由于这些元素有不同的父母，所有人都是第一个孩子。您可以通过将类添加到<section>并使用它来阻止此操作：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;