浏览器按什么顺序处理 css？ [复制]答案

【问题标题】：In what order does the browser process css? [duplicate]浏览器按什么顺序处理 css？ [复制]
【发布时间】：2013-07-05 22:04:26
【问题描述】：

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

【问题讨论】：

css 按照解析 dom 时遇到的顺序进行处理。根据具体的浏览器实现，dom MIGHT 在处理各种文件时被修改，或者它可以加载所有 css，然后应用规则。关于 CSS 的应用顺序有很多规则：developer.mozilla.org/en-US/docs/Web/CSS/Specificity
@MarcB 我认为你的评论应该是一个答案。
这个问题有实际应用吗？
@cimmanon 是的，这个问题有很多实际应用，你从来没有让两个文件创建相同的规则吗？当您尝试为第三方组件设置样式时会发生很多情况...
这不是stackoverflow.com/questions/5902858/…的真正副本在这种情况下，特异性很重要（并且顺序不重要），在这种情况下，特异性无关紧要，因为它是相同的但顺序很重要

标签： css

【解决方案1】：

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

1：内联-然后-

2：样式标签-然后-

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：