爲什麼CSS應用#flowerContainer IMG規則而不是應用#flower規則

的確定有很多的文章在談論CSS層疊重點，最近，我讀this one並有一些點我想通了： -爲什麼CSS應用#flowerContainer IMG規則而不是應用#flower規則

ID重量比階級和階級比標籤
ID重量相同，內嵌的風格，但更多更因爲內嵌來後，它贏得了壓倒一切的規則
更多的選擇重量比即.container img規則越少選擇將覆蓋img規則的更多

看看這個代碼： -

<div id="flowerContainer" > 
    <img id="flower" src="..." /> 
</div>

嘗試應用以下規則： -

#flowerContainer img{width:500px;} 
#flower {width:300px}

根據第二規則#flower寬度規則應適用，但#flowerContainer img應用爲什麼？

來源

2015-11-04 Mostafa Darwish

Here是CSS如何計算哪個選擇器優先的官方文檔。

一個選擇的特異性的計算方法如下：

計數在選擇器ID的屬性數（= A）

計數在選擇其它屬性和僞類的數量（ = b）

計算選擇器中元素名稱的數量（= c）忽略僞元素。

將三個數字a-b-c（在基數較大的數字系統中）連接給出了特異性。

一些例子：
*    {} /* a=0 b=0 c=0 -> specificity = 0 */ 
LI   {} /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   {} /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL+LI  {} /* a=0 b=0 c=3 -> specificity = 3 */ 
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ 
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */ 
#x34y   {} /* a=1 b=0 c=0 -> specificity = 100 */ 

#id element規則（101）比#id規則（100）更具體的，所以他們將優先。

來源

2015-11-04 00:30:07

不要這樣想更具體。 ID規則（＃）應優先於類（。）或元素（img）規則。但是，ID +元素（#IMG）很可能會被視爲更具體的ID，即使ID不適用於元素 –

是的，但這適用於相同權重的規則，即內部和外部樣式表，而內聯和內聯樣式的權重相同，高於內部和外部樣式表。在邏輯上，id僅指元素，因爲每個元素不超過一個id。在我的例子中，我選擇id後跟任何子標記一次，然後我指定元素本身的id一次。我認爲元素ID應該贏得比賽 –

@MostafaNagib - 那麼你需要澄清規則的位置。你的問題表明它們位於同一級別（在同一個文件中），所以標準優先級適用。位置隻影響相同權重的結果。 –

#flowerContainer img的特異性高於#flower的特異性，這就是爲什麼在那裏應用該規則的原因。

這是因爲其中一個只有ID選擇器，而另一個同時具有ID選擇器和的類型選擇器。

在MDN瞭解更多關於特異性：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

來源

2015-11-04 00:33:54

因此img＃flower應該優先於上面的任何一個示例。 –

首先，你應該閱讀CSS如何計算特異性here。

一個選擇的特異性的計算方法如下：

計數在選擇器ID的屬性數（= A）

計數在選擇其它屬性和僞類的數量（ = b）

統計選擇器中的元素名稱數（= c）忽略僞元素。

連接三個數字a-b-c（在一個大基數系統中）給出了特異性。

所以在的情況下，

#flowerContainer img { width:500px; } /* a=1,b=0,c=1 (a-b-c = 101) */ 

#flower { width:300px; } /* a=1,b=0,c=0 (a-b-c = 100) */

所以#flowerContainer img（101）比#flower（100）

來源

2015-11-04 00:51:07 nnattawat

老兄，你不應該複製我的答案！ – nnattawat

爲什麼CSS應用#flowerContainer IMG規則而不是應用#flower規則

回答

相關問題