html - [class$ =""] 和 [id* =""] 有什么特殊性？

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 is more specific than [id*="idName"]. But .className and [class*="className"] seem to be the same specificty.

是的。那就是the spec says they should be .

count the number of ID selectors in the selector (= a)

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

您有一个 id 选择器、两个属性选择器、一个类选择器和一个类型选择器。