CSS Nth child 用于引用消息

Question

我正在创建一个消息系统，用户可以在其中引用其他用户的消息。它适用于一个引号，但当我有多个引号时，我希望能够在视觉上区分它们。

我正在使用“第 n 个 child ”选择器尝试为每个第二个引号 block 提供不同的视觉样式，即偶数行。

我有一个帖子的以下 HTML 结构，其中包含 4 个引号，即一个引号引用另一个。

<div class='post_container'>
<blockquote><cite>Quote: user1</cite>

<blockquote><cite>Quote: user2</cite>

<blockquote><cite>Quote: user3</cite>
<blockquote><cite>Quote: user4</cite>

<p>post1</p>
</blockquote>
<p>post2</p>
</blockquote>

<p>post3</p>
</blockquote>

<p>post4</p>
</blockquote>
</div>

我使用的CSS代码如下:

.post_container blockquote{
    padding:10px;
    margin:10px;
    background-color:#000000;
}

.post_container blockquote *:nth-child(even){
    border:thick;
    background-color:#3FF;
}


.post_container blockquote>cite{
    font-weight:bold;
    font-size:16px;
    background-color:#999999;   
}

.post_container blockquote *>div:nth-child(2){
    background-color:#3FF;
}

这是它目前在 HTML 中的样子: http://jsfiddle.net/5Jjxj/6/

Answer 1

使用 .post_container blockquote:nth-child(even) *

代替 .post_container blockquote *:nth-child(even){