0

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

我正在使用“nth child”选择器尝试为每个第二个引用块赋予不同的视觉样式，即偶数行。

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

<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/

4

1 回答 1

1

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

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

于 2013-02-06T10:57:05.790 回答