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)。
- 按 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>