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

Question

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

采取以下代码：

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

在这种情况下，作为使用正常类选择预期的color的值最初​​，虽然后来在该文件中被重新定义为blue，从而所产生的颜色在课堂上的元素是蓝色的。

现在借此例如：

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

在这种情况下，现在开始使用的属性选择限定example为div的颜色值，当该值是使用正常CSS类选择重新定义的，从绿色变化到蓝色在div中被忽略，并且由属性选择器设置的值优先，尽管整个类的蓝色值在稍后在文件中重新声明。

根据Mozilla有关CSS class selectors的文档，它说正常的选择器和属性选择器是“等效的”，尽管在这种情况下似乎不是这种情况。这是什么原因？

Answer 1

我最初发布这个作为评论，但也许我应该已经答案。

---

让我们来看看你的两个CSS规则的实际情况：

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

• 元素必须是<div>
• 元素必须有一流的 “榜样”

.example {color:blue} 

• 元素必须有一流的“榜样”

---

因为你的第一个CSS规则有2个条件，而你的第二个规则，只有一个，第一个规则是更具体的 - 因此它将优先。

如果您要从第一条规则中删除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