css特異性id與屬性

Question

難以理解一個特定的特異性實例，也許我在思考它。

例如：

.class #id vs .class #id在第一種情況下，html會是正確的。 所以對我來說這讓我覺得它就像一個屬性。 這會改變特異性嗎？

編輯：換句話說，我問.class #id：specificity = 1-1-0 .class #id：specificity = 1-1-0

同樣，例如.class [id =“id”]屬性或id？

Answer 1

在第一種情況下： .class#id匹配

<div class="class" id="id"><div> <!-- matches this div -->

但這個.class #id匹配

<div class="class">
  <div id="id"> <!-- matches this div -->
</div>

CSS選擇器中沒有空格意味着它們將應用於同一元素。 空間將暗示兒童元素。

特異性
關於你的最后一個案例.class[id=id] 幾乎與第一種情況完全相同： .class#id比.class[id=id] “更具體”，因為CSS中的attr優先級高於id的。

有關CSS特性的優秀閱讀，請查看此處 。

Answer 2

 .class#id{ background-color:red} /*specificity 0110*/ .class[id="id"]{ background-color:green} /*specificity 0020*/ 

 <div class="class" id="id">lorem</div> 

對於.class＃id，特異性是

• 0為內聯樣式，
• 1為ID，
• 1用於分類，屬性和偽類，
• 0表示元素和偽元素

對於.class [id =“id”]，特異性是

• 0為內聯樣式，
• ID為0 ，
• 2用於分類，屬性和偽類，
• 0表示元素和偽元素

參考： 特異性計算器