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表示元素和伪元素

参考： 特异性计算器