CSS - 样式优先级详解（选择器优先级、权重计算、!important）

作者：hangge | 2019-08-21 08:10

1，什么是样式的优先级？

（1）优先级就是分配给指定的 CSS 声明的一个权重，浏览器器会将最高优先级的样式应用到元素上。

（2）当多个 CSS 声明的优先级相等时（均为最高），其中最后的那个声明将会被应用到元素上。

2，优先级的基本排序规则

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

ID 选择器：如 #id{}
类选择器：如 .class{}
属性选择器：如 a[href="segmentfault.com"]{}
伪类选择器：如 :hover{}
标签选择器：如 span{}
伪元素选择器：如 ::before{}
通配符选择器：如 *{}

3，CSS 不同引入方式及其优先级

（1）下面是 css 引入的 3 种方式：

行内样式：

<div style='background:red'></div>

内联样式：

<html>
  <style type='text/css'>
     div{
        background:red;
     }
  </style>
</html>

链接样式：

<html>
  <link rel='stylesheet' type='text/css' href='style.css'/>
</html>

（2）如果三种方式来对同一目标元素设置相同样式，那么它们优先级：

理论上：行内 > 内联 > 链接。
实际上：行内仍然最高，但内嵌、链接谁离相应的代码近，谁的优先级高。

（3）比如我们外部有一个 style.css 文件，里面定义一个绿色的文字样式。

.c1 {
    color: green;
}

（4）页面中除了链接这个 css 文件外，还内嵌了一个样式，只不过文字颜色改成橙色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hangge.com</title>
    <style>
        .c1 {
            color: orange;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <div>
        <span class="c1">欢迎访问hangge.com</span>
    </div>
</body>
</html>

（6）当由于链接样式离元素更近，所以链接样式优先级更高，文字仍然显示绿色。

4，当标签同时被多个选择符选中时的优先级计算规则

（1）如果一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：

计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。
按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。
若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

（2）比如下面样例，两个选择符里的 ID 选择器的个数都是 1 个，但第一个选择符里类选择器个数（2 个）比第二个多（1 个），因此最终第一个选择符优先级更高，文字显示橙色。

<style>
    #id1 .c1.c2 {
        color: orange;
    }
    #id1 .c1 {
        color: green;
    }
</style>
<div id="id1">
    <span class="c1 c2">欢迎访问hangge.com</span>
</div>

5，!important 重要声明

（1）!important 并不是什么新特性，早在 CSS1 时代就已经存在了：

只要在声明的结束分号之前插入!important 则将其变成重要声明。
如果一个声明是重要声明，则优先级超过所有的非重要声明。

注意：在日常开发中我们必须避免使用 !important ，因为它将会让我们的代码变得难以维护。除了一种情况，那就是需要在全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式：

比如一些写得很糟糕的 jQuery 插件里面使用的内联样式，或者你（或你的同事）写了一些很差的内联样式。我们需要在全局样式中将其覆盖，则需要使用 !important

（2）比如这里我们修改上面的样例代码，将第二个选择符的颜色样式设置为重要声明，那么最终文字将变成绿色。

<style>
    #id1 .c1.c2 {
        color: orange;
    }
    #id1 .c1 {
        color: green !important;
    }
</style>
<div id="id1">
    <span class="c1 c2">欢迎访问hangge.com</span>
</div>

HTML5 / CSS3