Wählen n-Kind oder n-of-Typ, die

Question

in einem anderen Elemente gewickelt ist, ich habe dieses 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> 

I jeder von 4 homepage-item divs mit verschiedenen CSS Ziel versuchen. Anstatt eine separate Klasse für jede Instanz von homepage-item hinzuzufügen, versuche ich nth-child oder nth-of-type zu verwenden.

Ich habe verschiedene Kombinationen von CSS versucht, aber das Beste ist es tun könnte, den ersten (1) CSS auf alle vier homepage-item divs anwenden:

.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

Änderung diese

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

---

Randbemerkung:

Wenn Sie in dent your code Sie sehen dies auch deutlicher

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