CSS屬性選擇器優先於普通的CSS類選擇器

Question

我最初在SVG文件中使用CSS時注意到了這個問題，並認爲它是渲染錯誤，但在HTML中嘗試它之後，發生了相同的情況。

採取以下代碼：

.example {color:green} 
.example {color:blue} 

在這種情況下，作爲使用正常類選擇預期的color的值最初​​，雖然後來在該文件中被重新定義爲blue，從而所產生的顏色在課堂上的元素是藍色的。

現在藉此例如：

div[class='example'] {color:green} 
.example {color:blue} 

在這種情況下，現在開始使用的屬性選擇限定example爲div的顏色值，當該值是使用正常CSS類選擇重新定義的，從綠色變化到藍色在div中被忽略，並且由屬性選擇器設置的值優先，儘管整個類的藍色值在稍後在文件中重新聲明。

根據Mozilla有關CSS class selectors的文檔，它說正常的選擇器和屬性選擇器是「等效的」，儘管在這種情況下似乎不是這種情況。這是什麼原因？

Answer 1

我最初發布這個作爲評論，但也許我應該已經答案。

---

讓我們來看看你的兩個CSS規則的實際情況：

div[class='example'] {color:green} 

• 元素必須是<div>
• 元素必須有一流的 「榜樣」

.example {color:blue} 

• 元素必須有一流的「榜樣」

---

因爲你的第一個CSS規則有2個條件，而你的第二個規則，只有一個，第一個規則是更具體的 - 因此它將優先。

如果您要從第一條規則中刪除div部分，那麼它將被視爲等同（如MDN所述），此時文本會變爲藍色。

Answer 2

Mozilla的文檔是正確的。 但是，在考慮特異性時，您需要接收賬戶div和[class='example']。 這兩個組合比.example更強。

這裏是特異性的不錯表現： https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

如果你去開smasingmagazine.com articele，你會得出這樣的結論：

.example有10

而div[class='example']電源有電11