Question

[class$=" "]
[class*=" "]
[class^=" "]

以上所有（以及ID等价物）似乎都不符合标准的CSS特异性权重规则。

我制作了一个Codepen来展示他们有多奇怪和矛盾。 http://codepen.io/mildrenben/pen/myYLmG

标记

<div id="wrap">
  <div class="container">
    <p> #idName is more specific than [id*="idName"]. But .className and [class*="className"] seem to be the same specificty.</p>
  </div>
</div>

CSS

#wrap {
  border: solid 5px green;
}

[id*="wrap"] {
  border: solid 5px red;
}

.container {
  background: red;
}

[class*="container"] {
  background: yellow;
}

p {
  font-family: sans-serif;
  padding: 6px;
}

有人可以澄清这些选择者持有的特异性权重吗？

由于

Answer 1

#idName比[id*="idName"]更具体。但.className和[class*="className"]似乎具有相同的特异性。

是。这就是the spec says they should be。

计算选择器中的ID选择器数量（= a）

计算选择器中的类选择器，属性选择器和伪类的数量（= b）

你有一个id选择器，两个属性选择器，一个类选择器和一个类型选择器。

Answer 2

CSS特异性权重有四个部分，例如：0,0,0,0

id：0,1,0,0
class，attribute，pseudo-classes：0,0,1,0
元素，伪元素：0,0,0,1
“+”或“*”或“＆gt;” ：0,0,0,0

例如

example1:  #header .container[name="1"] div {  } 
example2:  #header div div div div div div div p p p h2::before {  }

example1_specificity = id + class + attribute + element = 0,1,2,1
example2_specificity = id + pseudo-class + element*11  = 0,1,1,11

特异性将从左到右比较四个部分，直到一个比另一个大，所以example1_specificity更大

当特异性相等时，一个接一个将获胜
！important将赢得任何特异性
0,0,0,0特异性将赢得继承

我希望它能帮到你

[class $ =“”]和[id * =“”]有什么特殊性？

2 个答案: