[class$=" "] 和 [id*=" "] 有啥特殊性？

Posted 2023-03-06

【中文标题】[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，我不确定

【参考方案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 特异性将赢得继承

希望对你有帮助