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

I had studied earlier that embedded css always overrides external css. But I found that whichever comes last in the code, those styles prevail.

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

Please see the following code:(Considering that I have used color:green; in external css for h3)

请参阅以下代码:(考虑到我使用了颜色：绿色;在外部css中使用了h3）

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

Output of the above code will show me any text I write inside h3 in red color.

输出上面的代码将显示我在h3中用红色写的任何文本。

But if I write the above code like this:-

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

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

In the above case, I get the color of text inside h3 as "green" (since assuming I have given "green" as font-color in external css).

在上面的例子中，我得到h3里面的文本颜色为“绿色”（因为假设我在外部css中给出了“绿色”字体颜色）。

This is because I have written "link" tag after "style" tag.

这是因为我在“style”标签之后写了“link”标签。

So which means that external css is not always over-ridden by embedded css.

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

Or is it a rule to write the "link" tag always before "style" tag in "head".

或者，在“head”中的“style”标记之前始终写入“link”标记是一种规则。

Please explain this point.

请解释一下这一点。

4 个解决方案

#1

It doesn't matter if your stylesheet is within <style>-tags or externally and linked with <link />. The last one has always precedence, they could even be in the same external file, really just the order of the selectors and their specificities matter.

如果样式表位于

However, inline CSS using the style=".." attribute always has precedence, because it's most specific. To override that, you would have to use !important. Properties in style=".." using !important cannot be overridden.

但是，使用style =“..”属性的内联CSS始终具有优先权，因为它是最具体的。要覆盖它，你必须使用！important。使用！important的style =“..”中的属性不能被覆盖。

#2

Which CSS rules are applied depends on the specificity of the CSS rule, where that rule is placed, and the presence of !important. If two contradictory rules are placed, the rule declared later will overwrite the previous rule. If two contradictory rules are declared with selectors of varying specificity, the more specific styles will win, regardless of placement. If a rule is marked as !important e.g.

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

h1 {
  color: green !important;
}

the !important rule will always win.

重要规则永远胜利。

For reference the list of specificity of CSS selectors goes like this (from most specific to least):

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

Style attributes
样式属性
ID
ID
Class, pseudo class, attribute
类，伪类，属性
Elements
分子

#3

It does not matter if it is embedded or not. styles are applied according to Cascading order

它是否嵌入并不重要。根据级联顺序应用样式

#4

After all the rules of css, if there are 2 with the same specificity, the last one defined will take over.

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

For example, writing:

例如，写作：

div { 
    background: green;
}


div {
    background: red;
}

Will turn it red regardless of the source.

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

#1