嵌入式CSS是否总是覆盖外部CSS? [英] Does embedded css always override external css?
问题描述
我之前研究过,嵌入式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.
请考虑以下代码,因为我已经使用了color:green;在h3
的外部CSS中.
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>
以上代码的输出将显示我在h3
中用红色书写的所有文本.
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>
在上述情况下,我将h3
内部的文本颜色设为绿色"(因为假设我在外部CSS中将绿色"指定为font-color
).
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 ).
这是因为我在style
标签之后写了link
标签.
This is because I have written link
tag after style
tag.
因此,这意味着外部CSS不会总是被嵌入式CSS覆盖.
So which means that external css is not always over-ridden by embedded css.
还是在head
中始终在style
标记之前写入link
标记的规则.
Or is it a rule to write the link
tag always before style
tag in head
.
请解释这一点.
推荐答案
您的样式表是在<style>
标签内还是在外部并与<link />
链接都没有关系.最后一个始终优先,它们甚至可以位于同一外部文件中,实际上只是选择器及其
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.
但是,使用style=".."
属性的 内联 CSS始终具有优先级,因为它是最具体的.要覆盖它,您必须使用!important
.使用!important
的style=".."
中的属性不能被覆盖.
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屋!