CSS第N個孩子用於引用消息

我正在創建一個消息系統，用戶可以在其中引用其他用戶的消息。它適用於一個引用，但是當我有多個引號時，我希望能夠在視覺上區分它們。CSS第N個孩子用於引用消息

我使用「第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/

來源

2013-02-06 Nuvolari

這並不完全清楚你想要什麼樣的佈局，但是如果你使用blockquote：nth-child（even）而不是*：nth-child，它會變得更清晰一些。我認爲你可能需要重構你的HTML，你需要做的最終取決於你要找的佈局。 – Purpletoucan

我簡化了一下，所以現在在blockquote裏面沒有div，只是引用了引用的文本。 Thx的建議。 – Nuvolari

如果您想要設計每個第n個嵌套元素的樣式，那麼使用'：nth-child（）'是不可能的。您可能需要手動重複blockquote選擇器... – BoltClock

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

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

來源

2013-02-06 10:57:05 w3jimmy

非常感謝您的答案，做了訣竅:) – Nuvolari

第二個想法它只適用於第一個報價之後，它沒有。 – Nuvolari

，因爲你改變了你的html代碼，如果你能解釋你假裝的效果會更容易，哪些元素完全不能正確顯示？ – w3jimmy

CSS第N個孩子用於引用消息

回答

相關問題