0

ユーザーが他のユーザーのメッセージを引用できるメッセージ システムを作成しています。1 つの見積もりでは問題なく機能しますが、複数の見積もりがある場合は、それらを視覚的に区別できるようにしたいと考えています。

「n番目の子」セレクターを使用して、2番目の各引用ブロックに異なる視覚スタイル、つまり行を与えようとしています。

内部に4つの引用を含む投稿の次のHTML構造があります。つまり、1つの引用が別の引用を引用しています。

<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 に答える