嵌入式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屋！
