Wie nth-of-type verwenden, um verschachtelte Kinder auszuwählen

Question

Ich versuche, ungerade und gerade Header, die mit Inhalt verknüpft sind. Sie sind in mehreren DIVs, und ich bin nicht in der Lage, nth-child oder nth-of-type zu arbeiten - nur die ungeraden Stile werden angezeigt. Hier sind einige Concept-Code:

HTML:

<div class="content"> 
<h2>Welcome to my blog</h2> 
<div class="post"> 
    <h2><a href="myPostLink">This is a post</a></h2> 
    <div class="entry"> 
     <p>here is some content</p> 
    </div> <!-- end entry --> 
    <div class="meta"><p>Here is meta info</p></div> 
</div> <!-- end post --> 

<div class="post"> 
    <h2><a href="myPostLink">This is another post</a></h2> 
    <div class="entry"> 
     <p>here is some more content</p> 
    </div> <!-- end entry --> 
    <div class="meta"><p>Here is meta info</p></div> 
</div> <!-- end post --> 
</div> <!-- end content --> 

CSS:

.content h2 a:nth-of-type(odd){color: #444;} 
.content h2 a:nth-of-type(even){color: #ccc;} 

jsfiddle

Mein Denkprozess wurde, dass da ich ab .content in meinem CSS die erste .content h2 a würde als ungerade und die zweite ev betrachtet werden en, etc. Anscheinend nicht so - sie werden alle als das erste Kind betrachtet. Gibt es eine Möglichkeit, die Header mit CSS allein so auszuwählen, wie ich es möchte? Mache ich etwas dummes?

Danke,

Ricky

Answer 1

Verwenden nth-child auf den .post Elemente, und wählen Sie dann das h2 Element von dort

jsFiddle example

.post:nth-child(odd) h2 a { 
    color: red; 
} 
.post:nth-child(even) h2 a { 
    color: green; 
} 

Answer 2

dieses Versuchen

.content div.post:nth-of-type(odd) a{color: #444;} 
.content div.post:nth-of-type(even) a{color: #ccc;} 

Das Element der ungeraden und geraden divs mit Post-Klasse. Nicht ganz sicher, ob das ist, was Sie brauchen. Ein funktionierendes Beispiel: http://jsfiddle.net/a4j7z/