嵌入式css是否总是覆盖外部css？

Question

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

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

<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为"绿色"(因为我假设我已经像font-color外部CSS 一样给出了"绿色" ).

这是因为我在link标签后写了style标签.

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

或者是它的规则写link之前总是标签style的标签head.

请解释一下这一点.

Answer 1

如果样式表在<style>-tags 内或外部并与之链接,则无关紧要<link />.最后一个始终优先,它们甚至可以在同一个外部文件中,实际上只是选择器的顺序和它们的特殊性很重要.

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

内联CSS仅获得优先权,因为它更具体,而不是因为顺序.在HTML5中,在某些情况下,你可以在body中包含`style`标签,但是在它应用的元素之后放置它并不会优先于内联CSS. (3认同)

Answer 2

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

h1 {
  color: green !important;
}

规则!important永远会赢。

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