我有一个在5个不同位置设置样式的类,浏览器在不同位置的顺序是什么？
排队
<div class="yellowtag" style="background: yellow;">This is yellow</div>
第一个处理过的css文件
// First instance inside of style.css
.yellowtag {
background: yellow;
}
第一个处理过的css文件中的黄色标记的第二个实例
// Second instance inside of style.css
.yellowtag {
background: yellow;
}
第二个处理过的css文件(在第一个.yellowtag规则下面)
// style2.css
.yellowtag {
background: yellow;
}
在头上
<head>
<style>
.yellowtag {
background: yellow;
}
</style>
</head>
浏览器处理CSS的具体顺序是:
1:内联 - 然后 -
2:样式标签 - 然后 -
3:HTML中定义的第一个CSS文件(从上到下)-then-
4:HTML中定义的第二个CSS文件 - 等等 -
因此,如果您在所有四个中都有一个标记,那么应用的标记就是内联样式
然而,在定义属性时使用!important可以覆盖所有这些