CSS属性选择器优先于普通的CSS类选择器

Question

我在SVG文件中使用CSS时最初注意到这个问题，并认为它是渲染错误，但在HTML中尝试后，出现了同样的情况。

请使用以下代码：

.example {color:green}
.example {color:blue}

在这种情况下，正如使用普通类选择器所预期的那样，color的值最初为green，但稍后在文件中将其重新定义为blue，因此产生的颜色为班上的元素是蓝色的。

现在举个例子：

div[class='example'] {color:green}
.example {color:blue}

在这种情况下，现在最初使用属性选择器在example中定义div的颜色值，当使用普通的CSS类选择器重新定义值时，在div中忽略从绿色到蓝色的更改，并且尽管稍后在文件中重新声明了整个类的蓝色值，但属性选择器设置的值优先。

根据关于CSS class selectors的Mozilla文档，它表示普通选择器和属性选择器是“等效的”，但在这种情况下似乎并非如此。造成这种情况的原因是什么？

Answer 1

我最初将此作为评论发布，但也许我应该回答。

让我们看一下两条CSS规则的实际情况：

div[class='example'] {color:green}

• 元素必须是<div>
• 元素必须有类＆＃34;示例＆＃34;

.example {color:blue}

• 元素必须有类＆＃34;示例＆＃34;

因为您的第一个CSS规则有两个条件，而您的第二个规则只有一个，所以第一个规则更具体 - 因此它将优先。

如果您要从第一条规则中删除div部分，它将被视为等效（作为MDN状态），此时文本将为蓝色。

Answer 2

Mozilla文档是正确的。 但在考虑特异性时，您需要接收帐户div和[class='example']。 这两个组合强于.example。

以下是特异性的一个很好的表示： https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

如果你去打开smasingmagazine.com articele，你会得出结论：

.example有10的力量

div[class='example']的权力为11