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

Question

昨天我在我们公司的一个 css 文件中偶然发现了一条规则，看起来像这样：

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

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

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

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

Answer 1

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

Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.

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

/* 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 属性 — 在复合选择器中，所有简单选择器都是彼此独立对待，这包括属性选择器，不管它们的名称 and/or 值如何。选择器不指定或假定一个元素可以是否具有多个 class 属性 — 只有属性存在选择器匹配基于至少一个存在。

话虽如此，该规范确实包含一个 informative note with respect to class selectors (i.e. not attribute selectors for the class attribute) suggesting that an element may theoretically have multiple class attributes, although this isn't possible in contemporary HTML. It also states, normatively，即一个元素可以具有多个 ID 属性，并且在匹配 ID 选择器时必须使用所有这些属性。对于属性选择器的值匹配，不存在这样的明确文本，因为多个 ID 仅在 HTML 和 different 属性中才有可能，但推断相同的可能是合乎逻辑的会申请。

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

Using two identical attribute selectors [class][class]

css

attributes

css-selectors