html - CSS nth-of-type 不工作

Question

在 CSS 中使用 nth-of-type 选择器对我不起作用。它将第一个 child 的风格应用到它的其他 sibling 。所以发生的是所有 home-navigation-item div 都是浅绿色的。

   .home-navigation-item:nth-of-type(1) {
     background-color: aqua;
   }
   .home-navigation-item:nth-of-type(2) {
     background-color: red;
   }

<div class="home-navigation">
  <a href="news.html">
    <div class="home-navigation-item">NEWS</div>
  </a>
  <a href="announcements.html">
    <div class="home-navigation-item">ANNOUNCEMENTS</div>
  </a>
  <a href="events.html">
    <div class="home-navigation-item">SCHEDULE OF EVENTS</div>
  </a>

</div>

Answer 1

它不工作，因为它有多个父级。 nth-of-type 直接作用于 sibling 而不是他们的 parent ，然后是 sibling 。因此，最好先针对他们的 sibling parent ，然后再针对元素。 Read This

.home-navigation a:nth-of-type(1) .home-navigation-item{
   background-color: aqua;
}

.home-navigation a:nth-of-type(2) .home-navigation-item{
   background-color:red;
}

<div class="home-navigation">
        <a href="news.html"><div class="home-navigation-item"> NEWS </div></a>
        <a href="announcements.html"><div class="home-navigation-item"> ANNOUNCEMENTS </div></a>
        <a href="events.html"><div class="home-navigation-item"> SCHEDULE OF EVENTS</div></a>
</div>