网站首页文章转载
CSS - 样式优先级详解（选择器优先级、权重计算、!important）
简介 1，什么是样式的优先级？ （1）优先级就是分配给指定的 CSS 声明的一个权重，浏览器器会将最高优先级的样式应用到元素上。 （2）当多个 CSS 声明的优先级相等时（均为最高），其中最后的那个声明将会被应用到元素上。 2，优先级的基本排序规则 !important > 内联样式 ......
CSS - 样式优先级详解（选择器优先级、权重计算、!important）
2019-08-21
发布：hangge
阅读：154
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 文件，里面定义一个绿色的文字样式。
（4）页面中除了链接这个 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）。
- 按 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>