nth-of-type ergibt sogar für jedes Element Mystery

Question

Ich habe Mühe herauszufinden, warum ich nth-of-type (even) und nth-of-type (odd) nicht korrekt in meinem Markup verwenden kann. Ich habe viele Variationen ausprobiert und ein xpath/css Chrome-Browser-Tool verwendet, um zu verifizieren, dass jede Instanz meines Elements news-item-card-header gleichwertig ist. Wenn es in meinem Beispiel richtig funktionieren würde, würde der untere Rand die Farben wechseln.

<!-- Card Begin --> 
<div class="col-xs-12"> 
    <div class="col-xs-2"></div> 
    <div class="col-xs-8"> 
    <div class="ui fluid card"> 
     <div class="content"> 
     <div class="header card-header">  
      <span class="glyphicon glyphicon-user"></span> 

      <span class="news-item-card-header"> 
      John Doe is a new contact at the Advisor Group 
      </span> 

     </div> 
     <div class="description" style="padding-top:15px"> 
      Contact him for Portfolio Platform offerings (GEARS, Step Securities, CDs); ECAP Strategy Guide 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-2"></div> 
</div> 
<!-- Card end --> 

CSS:

.news-item-card-header:nth-of-type(odd) { 
    border-bottom: 2px solid #143F6E; 
} 

.news-item-card-header:nth-of-type(even) { 
    border-bottom: 1px solid #FAAA41; 
} 

JSFiddle: https://jsfiddle.net/schins02/gmgztuwj/

Vielen Dank für jede Hilfe

Answer 1

gerade und ungerade Arbeit in einmal parrent Behälter

.card-header .news-item-card-header { 
 
    width: calc(100% - 35px); 
 
} 
 

 
.news-item-card-header { 
 
    float: right; 
 
} 
 

 
.col-xs-12:nth-of-type(odd) .news-item-card-header { 
 
    border-bottom: 2px solid #143F6E; 
 
} 
 

 
.col-xs-12:nth-of-type(even) .news-item-card-header { 
 
    border-bottom: 1px solid #FAAA41; 
 
} 
 

 

 
/*.card-header:nth-of-type(odd) .news-item-card-header { 
 
    border-bottom: 2px solid #143F6E; 
 
} 
 

 
.card-header:nth-of-type(even) .news-item-card-header { 
 
    border-bottom: 1px solid #FAAA41; 
 
}*/ 
 

 

 
/*.card-header .news-item-card-header:nth-of-type(odd) { 
 
    border-bottom: 2px solid #143F6E; 
 
} 
 

 
.card-header:nth-of-type(even) .news-item-card-header { 
 
    border-bottom: 1px solid #FAAA41; 
 
}*/

<div class="row" id="news-feed2"> 
 
    <div class="col-xs-12" id="news-feed-container"> 
 
    <h2>News Feed</h2> 
 
    <div style="margin-top:40px"></div> 
 

 
    <!-- Card Begin --> 
 
    <div class="col-xs-12"> 
 
     <div class="col-xs-2"></div> 
 
     <div class="col-xs-8"> 
 
     <div class="ui fluid card"> 
 
      <div class="content"> 
 
      <div class="header card-header"> 
 
       <span class="glyphicon glyphicon-earphone"></span> 
 
       <span class="news-item-card-header"> 
 
       
 
       Conversation with Brett Harrsion from Advisor Group shows there is progress being made towards the MLCD approval 
 
      </span> 
 
      </div> 
 
      <div class="description" style="padding-top:15px"> 
 
       There have been talks with the team at advisor group that lead us to believe we will be able to sell MLCDs sometime in early March 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"></div> 
 
    </div> 
 
    <!-- Card end --> 
 

 
    <!-- Card Begin --> 
 
    <div class="col-xs-12"> 
 
     <div class="col-xs-2"></div> 
 
     <div class="col-xs-8"> 
 
     <div class="ui fluid card"> 
 
      <div class="content"> 
 
      <div class="header card-header"> 
 
      
 
       <span class="glyphicon glyphicon-user"></span> 
 
       <span class="news-item-card-header"> 
 
       John Doe is a new contact at the Advisor Group 
 
       </span> 
 

 
      </div> 
 
      <div class="description" style="padding-top:15px"> 
 
       Contact him for Portfolio Platform offerings (GEARS, Step Securities, CDs); ECAP Strategy Guide 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"></div> 
 
    </div> 
 
    <!-- Card end --> 
 

 
    </div> 
 

 
</div>

Answer 2

Der Selektor :nth-of-type ist für Elemente desselben Typs gedacht (d. H. selbe Tag-Name), unabhängig von dem CSS-Selektor davor. Das folgende Beispiel verdeutlicht dies:

https://jsfiddle.net/gmgztuwj/3/

Und hier weitere Informationen von:

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

The: n-of-Typ (ein + b) CSS-Pseudoklasse Streichhölzern ein Element, das eine + 0-Geschwister mit demselben Elementnamen davor im Dokumentbaum für einen gegebenen positiven oder Nullwert für n hat und ein Elternelement hat.