使用两个相同的属性选择器 [class][class]答案

【问题标题】：Using two identical attribute selectors [class][class]使用两个相同的属性选择器 [class][class]
【发布时间】：2021-04-23 19:00:09
【问题描述】：

昨天我在我们公司的一个 css 文件中偶然发现了一条规则，如下所示：

.classname1[class][class] { 
   margin:0 !important; 
}

我对这条规则的解释是，也许有人想确保这条规则适用，即使添加了另一个具有“！important”属性的类。如果是这样的话，我相信有一个 [class] 属性就足够了。像这样：

.classname1[class] {
   margin:0 !important;
}
.classname2 {
   margin:5px !important;
}
<div class="classname1 classname2">
   ...
</div>

我的问题是，为什么规则中的第二个属性属性[class]？

【问题讨论】：

[class][class] 选择看起来很奇怪。他们是否试图选择一个具有两个类属性的元素？同名的两个属性无效请参阅 [link]stackoverflow.com/questions/26341507/… 中 @jeremy 的回答，这意味着永远不应选择 .classname1[class][class] 选择 - 但实际上是这样吗？
@A Haworth：会匹配，看我的回答。

标签： css css-selectors attributes

【解决方案1】：

[class][class] 匹配任何具有class 属性的元素（或者，更准确地说，至少有一个 class 属性——原因见下文）。 [class][class] 和 [class] 之间唯一的功能区别是特异性，如 each attribute selector contributes its own specificity amount：

注意：允许重复出现相同的简单选择器，这样做会增加特异性。

作为参考，以下是所有三个示例选择器的特殊性：

/* 1 class, 2 attributes -> specificity = (0,3,0) */
.classname1[class][class]

/* 1 class, 1 attribute  -> specificity = (0,2,0) */
.classname1[class]

/* 1 class               -> specificity = (0,1,0) */
.classname2

在不太具体的选择器下的!important 声明仍将覆盖此选择器下的非重要声明。此选择器下的 !important 声明将覆盖不太具体的选择器（或在源顺序中较早出现的同样具体的选择器）下的任何 !important 声明。

如果唯一需要覆盖的选择器是.classname2，那么在类选择器之上添加两个属性选择器确实有点过头了。但据我们所知，作者可能打算覆盖像您的中间示例这样的选择器。或者这可能确实是一个错误。只有他们肯定知道，但这些是我有根据的猜测。

[class][class] 匹配的原因是因为它不要求元素具有两个 class 属性 — 在复合选择器中，所有简单选择器都相互独立处理，这包括属性选择器，无论其名称和/或值如何。选择器不指定或假定元素是否可以具有多个class 属性——只是属性存在选择器基于至少一个的存在来匹配。

话虽如此，规范确实包含一个informative note with respect to class selectors（即class 属性的not 属性选择器）表明一个元素可能理论上有多个@ 987654338@ 属性，尽管这在现代 HTML 中是不可能的。它还指出，normatively，一个元素可以有多个 ID 属性，并且在匹配 ID 选择器时必须使用所有这些属性。对于属性选择器的值匹配，不存在这样的显式文本，因为多个 ID 只能在具有不同属性的 HTML 中出现，但推断同样适用可能是合乎逻辑的。

【讨论】：