Question

我之前曾研究过，嵌入式CSS总是会覆盖外部CSS。但我发现代码中的最后一个，这些风格占上风。

请参阅以下代码，考虑到我使用的颜色：绿色;在h3的外部CSS中。

<head>
<link rel=stylesheet href="style.css">
<style>
h3{
color:red;
}
</style>
</head>

上述代码的输出将向我显示我在h3内以红色编写的任何文字。

但是如果我像这样编写上面的代码： -

<head>
    <style>
h3{
color:red;
}
</style>
<link rel=stylesheet href="style.css">
</head>

在上面的例子中，我得到h3内的文字颜色为＆＃34;绿色＆＃34; （因为假设我在外部CSS中给出了＆＃34;绿色＆＃34;为font-color）。

这是因为我在link代码后写了style标记。

这意味着外部css并不总是被嵌入式css覆盖。

或者link标记始终在style之前写入head标记。

请解释这一点。

Answer 1

如果您的样式表位于<style> - 标记内或外部并与<link />相关联，则无关紧要。最后一个始终优先，它们甚至可以在同一个外部文件中，实际上只是选择器的顺序和它们的specificities。

但是，内联使用style=".."属性的CSS始终具有优先权，因为它是最具体的。要覆盖它，您必须使用!important。 <{1}}使用style=".."的属性无法覆盖。

Answer 2

应用哪些CSS规则取决于CSS规则的特殊性，放置规则的位置以及!important的存在。如果放置了两个相互矛盾的规则，则稍后声明的规则将覆盖先前的规则。如果使用不同特异性的选择器声明两个相互矛盾的规则，则无论放置位置如何，都将获得更具体的样式。如果规则标记为!important，例如

h1 {
  color: green !important;
}

!important规则将永远胜利。

作为参考，CSS选择器的特异性列表如下（从最具体到最少）：

Answer 3

是否嵌入无关紧要。根据{{3}}

应用样式

Answer 4

在css的所有规则之后，如果有2个具有相同的特异性，则定义的最后一个将接管。

例如，写作：

div { 
    background: green;
}


div {
    background: red;
}

无论来源如何，都会将其变为红色。