CSS3第n個孩子不工作的Chrome 9

嘿，我有這樣的代碼：CSS3第n個孩子不工作的Chrome 9

<div class="sidebox"> 

      <h3>Course Summary</h3> 

      <div class="block"> 

       <h4>Course ID</h4> 
       <p>MS00000001</p> 
       <h4>Start Date</h4> 
       <p>14<sup>th</sup> September 2011</p> 
       <h4>End Date</h4> 
       <p>12<sup>th</sup> June 2012</p> 
       <h4>Cost</h4> 
       <p>£1500.95</p>  

      </div> 

     </div>

現在我試着去改變每秒p標籤的顏色

.sidebox .block p:nth-child(odd) { 
    color: red !important; 
}

我試圖用，但它沒有工作：/沒有改變顏色，我在這裏做錯了什麼？

來源

2011-03-01 Ozzy

作爲馬特球說，elements are 1-indexed而不是0索引。因此你的元素甚至是孩子，而不是奇怪的，所以他們根本不會匹配。另一個問題是，:nth-child()考慮到該父母下的每個兄弟，無論類型如何，所以如果您使用p:nth-child(even),每p被選中。

使用p:nth-of-type(even)代替非p兄弟姐妹（在這種情況下，h4元素）被排除在選擇：

.sidebox .block p:nth-of-type(even) { 
    color: red !important; 
}

Sample on jsFiddle

來源

2011-03-01 00:32:01 BoltClock

謝謝，像一個魅力工作:) – Ozzy 2011-03-01 00:41:23

有沒有p元素是你的標記中的一個奇怪的孩子。 CSS nth-child是1索引。

一個元素的第一子項的索引是1

Source

來源

2011-03-01 00:31:13

所以如何將我選擇的每一第二P-？ – Ozzy 2011-03-01 00:31:44

@Ozzy：'n-child（even）'？ – 2011-03-01 00:32:23

不，那會選擇每個'p'，因爲他們都是孩子。 – BoltClock 2011-03-01 00:32:52

CSS3第n個孩子不工作的Chrome 9

回答

相關問題