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

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

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

我对该规则的解释是，可能有人希望确保该规则适用，即使添加了另一个具有“！important”属性的类。如果是这样的话，我相信只要有一个[阶级]阿提布特就足够了。像这样：

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

.classname1[class]{
边距：0！重要；
}
.classname2{
保证金：5px！重要；
}
...

---

我的问题是，为什么规则中的第二个属性属性[class]与任何具有

类
属性的元素匹配（或者更准确地说，至少有一个
类
属性-请参见下文了解原因）。
[class][class]
和
[class][class]
之间唯一的功能区别是特异性，如下所示：

注：允许重复出现同一个简单选择器，但会增加特异性

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

/*1个类，2个属性->特异性=（0,3,0）*/
.classname1[class][class]
/*1类，1属性->特异性=（0,2,0）*/
.classname1[类别]
/*1类->特异性=（0,1,0）*/
.classname2

一个
！不太特定的选择器下的重要声明仍将覆盖此选择器下的非重要声明。一个
！重要信息
此选择器下的声明将覆盖任何
！重要信息
在不太特定的选择器（或在源顺序的前面出现的同样特定的选择器）下的声明

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


[class][class]
匹配的原因是它不要求元素具有两个
class
属性-在复合选择器中，所有简单选择器都是独立处理的，这包括属性选择器，而不管它们的名称和/或值如何。选择器不指定或假定一个元素是否可以有多个
class
属性-仅属性存在选择器基于至少一个属性的存在进行匹配

话虽如此，该规范确实包含一个（即非
类
属性的属性选择器）建议元素理论上可能具有多个
类
属性，尽管这在当代HTML中是不可能的。它还指出，一个元素可以有多个ID属性，在匹配ID选择器时必须使用所有这些属性。对于属性选择器的值匹配，不存在这样的显式文本，因为只有在具有不同属性的HTML中才可能有多个ID，但推断同样的情况也适用可能是合乎逻辑的。
选择[class][class]看起来很奇怪。他们是否在尝试选取一个具有两个类属性的元素？相同名称的两个属性无效请参见[link]中@jeremy的答案，这意味着永远不应选择.classname1[class][class]选项，但实际上是这样吗？@A Haworth:这会匹配的，请参见我的答案。