選擇第n個孩子或者第n-的類型，它被包裹在另一個元素

Question

我有這樣的HTML：

<div class="homepage-body"> 
    <a href="#"> 
    <div class="homepage-item"> 
     <div class="homepage-icon"></div> 
     <div class="homepage-text"> 
      Test1 
     </div> 
    </div></a> <a href="#"> 
    <div class="homepage-item"> 
     <div class="homepage-icon"></div> 
     <div class="homepage-text"> 
      Test2 
     </div> 
    </div></a> <a href="#"> 
    <div class="homepage-item"> 
     <div class="homepage-icon"></div> 
     <div class="homepage-text"> 
      Test3 
     </div> 
    </div></a> <a href="#"> 
    <div class="homepage-item"> 
     <div class="homepage-icon"></div> 
     <div class="homepage-text highlighted"> 
      Test4 
     </div> 
    </div></a> 
</div> 

我努力的目標的每一個4 homepage-item的div不同的CSS。我試圖利用nth-child或nth-of-type而不是爲每個homepage-item的實例添加單獨的類。

我試過CSS的不同組合，但它能做的最好的是第（1）CSS適用於所有四個homepage-item的div：

.homepage-body > a > div:nth-of-type(1) { 
    background: green; 
} 
.homepage-body > a > div:nth-of-type(2) { 
    background: red; 
} 
.homepage-body > a > div:nth-of-type(3) { 
    background: yellow; 
} 
.homepage-body > a > div:nth-of-type(4) { 
    background: blue; 
} 

Answer 1

更改這個

.homepage-body > a:nth-of-type(1) > div { 
    background: green; 
} 

---

旁註：

如果您在凹下你的代碼，你會更清楚地看到這一點

<div class="homepage-body"> 
    <a href="#"> 
    <div class="homepage-item"> 
     <div class="homepage-icon"></div> 
     <div class="homepage-text"> 
     Test1 
     </div> 
    </div> 
    </a> 
    ... 
</div>