css - 浏览器按什么顺序处理 css？

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>

score 5 · Accepted Answer

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

1：内联-然后-

2：样式标签-然后-

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

4：在 HTML 中定义的第二个 CSS 文件 - 等等 -

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

然而，所有这些都可以通过在定义属性时使用 !important 来覆盖

score 2 · Accepted Answer

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

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

2 回答 2