Geolage's Blog主页文章标签分类
浅谈 CSS（样式）的优先级
| 前端 CSS |

  对于CSS（样式）优先级的问题，大家在开发过程中都必然或多或少的遇到过，谈及也不下千万次。要想处理好优先级可能带来的各种不协调和莫名其妙的“反人类”问题，就要重新回到这个问题最基本的层面上，找准根源、认真分析，才能知其所以然，悉症结所在，方能药到病除，与此同时也可以尽可能地少范一些“不太严谨”的毛病和看似“无所谓”的错误。

样式配置方式

网页配置样式的方式无非三种：

  1. 内联（行内）样式（Inline Style）
  2. 内嵌样式（Embedding Style）
  3. 外联（引用）样式（Linking Style）

P.S. 还有一种是使用@import的方式引入样式

先来简单温习一下其格式：

  1. <tag ... style=" ... "> [</tag>]
  2. <style> ... </style>
  3. <link href=" * .css " rel="stylesheet" type="text/css">
  4. @import [ url( ] "* .css " [ ) ]

我们知道，在一般情况下，其优先级是：1>2>3。但由于在网站开发过程中可能存在的诸多原因，会导致样式呈现出非意料之中的效果。这就需要我们通过测试工具来排查样式优先级可能存在的不当。

当然，这些简单的知识大家都已经很熟悉了，没有涉及比较复杂的原理，但很多人也不知其为何究竟如此。下面我们进一步来深入分析一下优先级的问题。

选择器的优先级

外部引用样式的css文件中，由于选择器的层级、格式、次序的不同亦产生样式优先级问题。

优先权(Specificity)

一个选择器的优先权由四个权值组成：

默认值：（0，0，0，0），因选择器不同而权重各不相同
Rule No.1：内联样式权重最高，以（1，0，0，0）表示；
Rule No.2：ID选择器权重次之，以 （0，1，0，0）表示；
Rule No.3：类、属性、伪类选择器，以（0，0，1，0）表示；
Rule No.4：标签和伪元素选择器权重是最基准的，以（0，0，0，1）表示；
Rule No.5：通配符（*）选择器，权重最低，值为0，以（0，0，0，0）表示。

举个栗子:

1
2
3
4
5
6
7
8
<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

分析：

1
2
3
4
5
6
7
8
9
10
*                   {}      /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li                  {}      /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line       {}      /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li               {}      /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li            {}      /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]      {}      /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red        {}     /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level        {}     /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y               {}     /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""                 /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

需要注意的是，在样式表中如果添加了” ! important “的字样，则其优先级最高，优先级顺序变为：

! important > 内联样式 > ID > Class | 伪类 | 属性 > 标签 | 伪元素 > 继承 > 通配符

还是那句老话：多看文档。多浏览几遍W3的文档，就会对这一问题豁然开朗了。

详细说明请查阅：W3 Cascade Rules & W3 CSS

用户样式

以上所谈到的都是基于网页开发者的角度而编写的CSS，故此来源亦可称为“作者”样式（Author StyleSheet）。但样式如果就从用户的角度来谈，一般还需考虑另外两种样式来源：“读者”样式（User StyleSheet）、用户代理样式（User Agent StyleSheet）。

读者，即浏览网页的用户，可以通过一些手段来修改HTML页面元素的样式（Firefox的 Firebug）*

用户代理，通常指浏览器，一些浏览器可以通过设置选项来修改页面元素的样式。*

以上优先级可以大致概为：

User declarations（!important）> Author declarations（!important）>
Author declarations（normal）> User declarations（normal）> User Agent stylesheet

具体描述请参考：用户样式优先级

因此，按照来源排序，其样式的优先级为：

  1. 用户设置的重要样式。

  2. 作者编写的重要样式。

  3. 作者编写的一般样式。

  4. 用户设置的一般样式。

  5. 浏览器设置的样式。

P.S. 注意，一些用户样式在 FF、IE 上的渲染效果会有所不同。

综上，可以总结出以下适用性规则：

  1. 选择器的权重由四项数值累加，故权值越大越优先；
  2. 当权值相等时，越后出现的样式越优先。继承样式将被后面指定的样式所替换；
  3. 创作者规则高于浏览者：开发者设置的CSS优先权高于浏览器所设置；
  4. 同一对象所配置的样式中含“!important”标记的优先级最大。
文章作者: Geolage Wu
文章链接: https://geolage.github.io/blog/2017/10/02/浅谈CSS（样式）的优先级/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！
CSS样式优先级