嵌入式的CSS总是会覆盖外部的CSS？ [英] Does embedded css always override external css ?
问题描述
我之前研究过嵌入式css总是覆盖外部css。
但是我发现代码中最后一个出现的是那些样式。
请参阅下面的代码:(考虑到我已经使用color：green;在外部css for h3中）
< HEAD>
< link rel = stylesheet href =style.css>
< style>
h3 {
颜色：红色;
}
< / style>
< / head>
以上代码的输出将显示我在h3中以红色写入的任何文本。
但是，如果我编写上面的代码，如下所示： - $ / b>
< head> ;
< style>
h3 {
颜色：红色;
}
< / style>
< link rel = stylesheet href =style.css>
< / head>
在上面的例子中，我将h3中的文本颜色设置为绿色
这是因为我在style标签后写了link标签。
因此，这意味着外部css并不总是被嵌入式css覆盖。
或者是写一个链接标签始终在风格标签之前的头。
请解释这一点。
无论你的样式表是在< style> - 标签内还是在外部并且与<<< ; link /> 。最后一个优先，他们甚至可以在同一个外部文件中，实际上只是选择器的顺序和他们的特定性。
然而， inline CSS使用 style =..属性总是具有优先权，因为它是最具体的。要覆盖它，你必须使用！important 。 style =..使用！important> 中的属性不能被覆盖。
I had studied earlier that embedded css always overrides external css. But I found that whichever comes last in the code, those styles prevail.
Please see the following code:(Considering that I have used color:green; in external css for 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.
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).
This is because I have written "link" tag after "style" tag.
So which means that external css is not always over-ridden by embedded css.
Or is it a rule to write the "link" tag always before "style" tag in "head".
Please explain this point.
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.
这篇关于嵌入式的CSS总是会覆盖外部的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
