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

【问题标题】：What specificity does [class$=" "] and [id*=" "] hold?[class$=" "] 和 [id*=" "] 有什么特殊性？
【发布时间】：2015-06-15 22:17:48
【问题描述】：

[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;
}

谁能澄清这些选择器所具有的特异性权重？

谢谢

【问题讨论】：

specificity.keegan.st 的特异性计算器似乎表明它们与类的权重相同，我猜它们可以作为 pseudo-classes
@Liam — 它们是属性选择器。伪类类似于:hover。
谢谢@Quentin，我不确定

标签： html css css-selectors css-specificity

【解决方案1】：

#idName 比 [id*="idName"] 更具体。但是.className 和[class*="className"] 似乎是同一个特性。

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

统计选择器中 ID 选择器的数量 (= a)

统计选择器中类选择器、属性选择器、伪类的个数（=b）

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

【讨论】：

值得补充的是，无论所讨论的属性如何，属性选择器的特异性总是相同的，因为选择器不对属性的文档语言语义做出任何假设。 id 属性恰好映射到 HTML 中的 id 选择器，这就是为什么 #idName 和 [id=idName] 将匹配相同的 HTML 元素。

【解决方案2】：

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

id: 0,1,0,0
类、属性、伪类：0,0,1,0
元素，伪元素：0,0,0,1
“+”或“*”或“>”：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 特异性将赢得继承

希望对你有帮助

【讨论】：