Ich brauche eine Erklärung, wie nth-of-type funktioniert

Question

Ich habe diesen Code und ich kann nicht herausfinden, warum der N-Typ-Selektor 2 sein muss, nicht 1, für das erste Geschwister dieses Typs.

Hier ist ein jsfiddle Code: https://jsfiddle.net/xj5hvn16/

Kann jemand bitte erklären, diese zu mir?

.flowbox .utm_registrars_code:nth-of-type(2) { 
 
    background-color: red; 
 
}

<div class="flowbox freebox"> 
 
    <div class="pholdcard18"></div> 
 
    <div class="flowcard14 utm_registrars_code"> 
 
    <div class="content"> 
 
     Content 1 
 
    </div> 
 
    </div> 
 
    <div class="flowcard14 utm_registrars_code"> 
 
    <div class="content"> 
 
     Content 2 
 
    </div> 
 
    </div> 
 
    <div class="flowcard14 utm_registrars_code"> 
 
    <div class="content"> 
 
     Content 3 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Das liegt daran, dass nth-of-type beginnt mit dem ersten Element eines bestimmten Typs, in Ihrem Fall ein div, und nicht das erste Element mit der ausgewählten Klasse

The: n-of-type() pseudo- class repräsentiert ein Element, das eine + Geschwister mit dem gleichen erweiterten Elementnamen davor im Dokument tree hat, für jede Null oder positive Ganzzahl von n, und hat ein übergeordnetes Element .

Weitere Informationen:

• https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:nth-of-type
• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

Answer 2

nth-of-type bedeutet nicht nth-of-class! div

Das erste Element ist vom Typ

<div class="pholdcard18"></div> 

Daher Ihr Content 1 Element der zweiten und hervorgehoben.