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

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

以下面的代码为例：

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

在这种情况下，正如使用普通类选择器所预期的那样，

color

的值最初为

green

，但后来在文件中它被重新定义为

blue

，因此类中元素的结果颜色为蓝色

现在以这个例子：

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

在这种情况下，现在开始使用属性选择器在

示例中定义div的颜色值，当使用普通CSS类选择器重新定义值时，div中从绿色到蓝色的更改将被忽略，并且属性选择器设置的值优先，尽管稍后在文件中重新声明了整个类的蓝色值

根据Mozilla在上的文档，它说普通选择器和属性选择器是“等价的”，尽管在这种情况下似乎不是这样。原因是什么？
Mozilla文档是正确的。
但是在考虑特殊性时，您需要考虑帐户
div
和
[class='example']
。
这两个组合比
更强。示例

以下是一个很好的特殊性表示：

如果你去打开smasingmagazine.com的文章，你会得出以下结论：

。示例
的幂为10

而
div[class='example']
具有11的强大功能，Mozilla文档是正确的。
但是在考虑特殊性时，您需要考虑帐户
div
和
[class='example']
。
这两个组合比
更强。示例

以下是一个很好的特殊性表示：

如果你去打开smasingmagazine.com的文章，你会得出以下结论：

。示例
的幂为10

虽然
div[class='example']
有11的威力我本来是把它作为一条评论发布的，但也许我应该把它作为一个答案


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

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


元素必须是

元素必须具有类“example”


元素必须具有类“example”


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

如果要从第一条规则中删除
div
部分，它将被视为等效的（如MDN所述），此时文本将是蓝色的。
我最初将此作为注释发布，但也许我应该对此作出回答


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

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


元素必须是

元素必须具有类“example”


元素必须具有类“example”


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

如果要从第一条规则中删除
div
部分，它将被认为是等效的（如MDN所述），此时文本将为蓝色。
第一条CSS规则查找两个条件（一个div和一个特定属性），而第二条CSS规则只查找一个条件（类）。虽然属性选择器本身可能是等效的，但您的第一个示例包括两个条件-因为它更具体，所以将优先。同意@桑蒂是对的。要有一个简单的属性选择器，您需要将样式规则更改为用于
[class='example']
删除
div
部分。第一个CSS规则查找两个条件（一个div和一个特定属性），而第二个CSS规则只查找一个条件（类）。虽然属性选择器本身可能是等效的，但您的第一个示例包括两个条件-因为它更具体，所以将优先。同意@桑蒂是对的。要有一个简单的属性选择器，您需要将样式规则更改为用于
[class='example']
删除
div
部分。感谢您的回复。我的逻辑最初是倒退的，因为我假设更广泛的定义优先于更具体的定义，但是当把它分解成条件语句时，这个概念是有意义的。谢谢你的回答。我的逻辑最初是向后的，因为我假设更广泛的定义优先于更具体的定义，但是当把它分解成条件语句时，这个概念是有意义的。