CSS refer to every odd nested child?

问题

I'm trying to make a comment system where nested comments have zebra background colors. (Blue bg replies to white bg replies to blue bg...)

Instead of referring to these as .comment, .comment .comment .comment, .comment .comment .comment, .comment, .comment ......, is there a way to refer to these nested children?

***I only have access to the stylesheet, so html, php, and javascript are out of the question.

回答1:

You could add an alternating class to accompany .comment that's applied procedurally as the comments are being laid out on the page (e.g: .row1, .row2, etc.) and then style those classes accordingly with CSS.

回答2:

I have a system where I wanted the Zebra effect on all the Rows in a table, i used the following jQuery. Maby the selector will apply for you as well.

$('#celebs tbody tr:even').css('background-color','#dddddd');

Hope this helps

回答3:

Look for nth-child in the CSS reference, selectors section. It's used something like this:

tr:nth-child(even) {
   background: #cccccc;
}
tr:nth-child(odd) {
   background: white;
}

you don't have to apply different classes to alternating rows; CSS itself will distinguish even rows from odd rows.

来源：https://stackoverflow.com/questions/8499496/css-refer-to-every-odd-nested-child