在CSS中使用n-of-type選擇器對我不起作用。它將第一個子元素的樣式應用于其余的兄弟元素。所以發生的事情是所有的家庭導航項目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>

它不工作是因為它有多個雙親。n-of-type作用于直接兄弟，而不是它們的父元素，然后作用于兄弟元素，或者當所有元素都是相同的，沒有可區分的父元素時(它們都是& lta & gt標簽)。所以最好是指向兄弟的父元素，然后是上面的元素，然后是元素本身。讀讀這個

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

對于為什么不能在div上使用n-of-type，Ganesh有一個很好的解釋——如果你這樣做，它們上面的錨標記反而需要它:

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

但是另一種處理方法是，在& ltdiv & gt標簽，您可以直接在它們上面做CSS，而不是:

div#news {
   background-color: aqua;
}

div#announcements {
   background-color:red;
}

div#events {
    background-color:yellow;
}

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