CSS特異性較低規則將覆蓋較高的特異性規則

p.child-class { 
    color: red; 
} 

.parent-class p { 
    color: green; 
}

HTML：

<div class="parent-class"> 
    <p class="child-class"></div> 
</div>

的選擇.parent-class被應用，而不是更高的特異性選擇p.child-class。這是爲什麼？
這是Fiddle。

編輯

據我所知，兩者具有相同的特異性。在那種情況下，如果我不能編輯父母的班級代碼，我該如何提高孩子班級的特異性？

無法重現：http://jsfiddle.net/9MmcB/你必須張貼您的HTML並解釋你希望發生什麼。 –

如果您切換規則的順序可以複製，那麼這些規則應用於頁面的順序是什麼？ –

選擇器.parent-class p和p.child-class具有完全相同的CSS特性，都有1個標籤選擇器和1個類選擇器。代碼後面的選擇器將應用。

2013-07-28 21:06:57

那麼我會如何增加孩子的特異性呢？我無法觸及父類 –

儘管如此，作爲一種「破解」（完全[有效]（http://www.w3.org/TR/css3-selectors/#specificity）），您可以指定兩次類名：' p.child-class.child-class'。它不會改變選擇器的含義，但會增加它的正式特異性。 –

這很好...如果沒有人找到更優雅的解決方案，我會接受你的答案！ –

你的這兩個規則具有不同的含義

.parent-class p

這個指定的規則p這是具有容器類中.parent-class

p.child-class

這個指定的規則p它具有類child-class

2013-07-28 21:04:37 Sachin

如前所述，它們具有相同的特徵，規則的順序是顯着的。

添加.parent-class將改變特異性

.parent-class p.child-class {

，然後順序並不重要。

2013-07-28 21:08:53

如果我不能編輯「父級」的代碼會怎麼樣？那麼我將如何增加孩子的特異性呢？ –

我的答案是增加將適用於「子級」的CSS規則的特殊性。如果您可以編輯HTML，那麼您當然可以添加一個全新的類或ID。 –

-1

你可以使用!important

2013-07-28 21:41:11 Jawad

回答