Question

我有一个在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;        
}

在头脑中

<head>
     <style>
         .yellowtag {
             background: yellow;        
         }
     </style>
</head>

Answer 1

浏览器处理CSS的具体顺序是：

1：内联 - 然后 -

2：样式标签 - 然后 -

3：HTML中定义的第一个CSS文件（从上到下）-then -

4：HTML中定义的第二个CSS文件 - 依此类推 -

因此，如果您在所有四个中都有一个标签，那么应用的标签就是内联样式

然而，在定义属性

时使用！important可以覆盖所有这些

Answer 2

由于它们都具有相同的特异性（单个类名，.yellowtag），源代码中的最后一个将是适用的。

但是，您有内联样式style="background: yellow;"，内联样式会覆盖其他规则，并且不适用特异性