第n個孩子（）和塊引用CSS

我有這樣的HTML代碼第n個孩子（）和塊引用CSS

<blockquote> 
    <cite>oioik wrote:</cite> 

    <blockquote> 
      <cite>oioik wrote:</cite> 

      <blockquote> 
       <cite>oioik wrote:</cite> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
      </blockquote> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
    </blockquote> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
</blockquote>

，我有這個CSS

blockquote { 
    font-size: 13px; 
    background-color: blue; 
    border: 0; 
    padding-left: 50px; 
} 
blockquote:nth-child(even) { 
    background-color: red; 
}

然後在我的例子中，我應該有藍色/紅色/藍色的背景顏色，但我有藍色/紅色/紅色

來源

2014-03-06 Lolo

這是因爲你的blockquotes是嵌套的 – slash197

甚至是相對於兄弟姐妹的位置 – fcalderan

你喜歡這個http://jsfiddle.net/V59Cq/1/ –

孩子和後裔有區別。

所以，如果你有：

<blockquote>1</blockquote> 
<blockquote>2</blockquote> 
<blockquote>3</blockquote>

它們是同父的孩子，編號如圖所示。

第二對是紅色的，因爲他們都是各自父母的第二個孩子（第一個是<cite>元素。）

在這種情況下，我不相信香草CSS將實現你想要什麼去做。你可能需要注入一個類名來做到這一點。

來源

2014-03-06 10:50:20

第n個孩子（）和塊引用CSS

回答

相關問題