[if lt IE 9]>

网站首页文章转载

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

张帅2020-01-09 68人围观
简介 1,什么是样式的优先级? (1)优先级就是分配给指定的 CSS 声明的一个权重,浏览器器会将最高优先级的样式应用到元素上。 (2)当多个 CSS 声明的优先级相等时(均为最高),其中最后的那个声明将会被应用到元素上。 2,优先级的基本排序规则 !important > 内联样式 ......

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

1,什么是样式的优先级?

(1)优先级就是分配给指定的 CSS 声明的一个权重,浏览器器会将最高优先级的样式应用到元素上。
(2)当多个 CSS 声明的优先级相等时(均为最高),其中最后的那个声明将会被应用到元素上。

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

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性
  • ID 选择器:如 #id{}
  • 类选择器:如 .class{}
  • 属性选择器:如 a[href="https://www.hangge.com/blog/cache/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='https://www.hangge.com/blog/cache/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="https://www.hangge.com/blog/cache/style.css" />
</head>
<body>
    <div>
        <span class="c1">欢迎访问hangge.com</span>
    </div>
</body>
</html>

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

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

(1)如果一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:
  • 计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。
  • abc 的顺序依次比较大小,大的则优先级高,相等则比较下一个。
  • 若最后两个的选择符中 abc 都相等,则按照"就近原则"来判断。

(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>
Top