How to use nth-of-type to select nested children

问题:

I am trying to style odd and even headers that are associated with content. They are inside several DIVs, and I am unable to get nth-child or nth-of-type to work- only the odd styles are displaying. Here is some 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

My thought process was that since I was starting at .content in my CSS, the first .content h2 a would be considered odd and the second even, etc. Apparently not so- they are all considered the first child. Is there a way to select the headers in the way I want with CSS alone? Am I doing something dumb?

回答1:

Use nth-child on the .post elements, and then select the h2 element from there

jsFiddle example

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

回答2:

Try this

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

The a element of odd and even divs with post class. Not quite sure if that's what you need. A working example: http://jsfiddle.net/a4j7z/