Question

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

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

对于包含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/

Answer 1

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

而不是.post_container blockquote *:nth-child(even){

CSS Nth Child用于引用消息

1 个答案: