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

问题描述：

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

采取以下代码：

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

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

现在借此例如：

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

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

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

你的第一个CSS规则是寻找*两个*条件（一个div **和**一个特定的属性），而你的第二个只寻找*一个*条件（类）。虽然它自己的属性选择器*可能是等价的，但第一个示例包含两个条件 - 因为它更具体，它会优先。 – Santi

同意。 @Santi是正确的。要有一个简单的属性选择器，您需要将样式规则更改为'[class ='example']'放弃'div'部分。 –

答

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

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

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

.example {color:blue}

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

如果您要从第一条规则中删除div部分，那么它将被视为等同（如MDN所述），此时文本会变为蓝色。

谢谢你的回应。我的逻辑原本是倒退的，因为我认为更广泛的定义优先于更具体的定义，但是当把它分解成条件语句时，这个概念是有道理的。 – WClarke

答

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

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

.example有10

而div[class='example']电源有电11