三、CSS优先级
层叠，指的是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。
当同一个元素 的同一个样式属性被赋予多个属性值时，我们就需要遵循一定的优先级规则来选择属性值。
样式覆盖发生冲突常见的 5 种情况：
- 引用方式冲突
- 继承方式冲突
- 指定样式冲突
- 继承样式与指定样式冲突
- !important
1.引用方式冲突
CSS有 3 种常用的引入方式：
- 外部样式
- 内部样式
- 行内样式
CSS引用方式不同，也会产生冲突。
（1）3种方式的优先级
行内样式 > (内部样式 = 外部样式)
行内样式优先级最高，内部样式 和外部样式优先级相同。
若内部样式 和 外部样式同时存在，则以最后引入的样式为准（后来者居上原则）。
2.继承方式冲突
继承，指的是
CSS的继承性。
（1）“ 最近的祖先元素 ”获胜
如果由于继承方式引起的冲突，则“ 最近的祖先元素 ”获胜。
最近的祖先元素，指的是当前元素的父元素。
（2）示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
body{
color:red;
}
#grandfather{
color:greenyellow;
}
#daddy{
color:palegreen;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="daddy">
<div id="girl">
“ 最近的祖先元素 ”获胜
</div>
</div>
</div>
</body>
</html>
<!--
字体最终颜色为 palegreen ，girl最近的祖先元素为daddy，若daddy元素没有定义color属性，则最近的祖先元素为grandfather。
-->
继承方式冲突示例1.png
3.指定样式冲突
指定样式，指的是指定” 当前元素 “的样式。
指定样式冲突，指的是指定” 当前元素 “的样式发生冲突。
（1）” 权值高者 “获胜
当直接指定的样式发生冲突时，样式权值高者获胜。
① 选择器权值
| 选择器 | 权值 |
|---|---|
| 通配符 | 0 |
| 伪元素 | 1 |
| 元素选择器 | 1 |
| class 选择器 | 10 |
| 伪类 | 10 |
| 属性选择器 | 10 |
| id 选择器 | 100 |
| 行内样式 | 1000 |
常见的伪元素只有 4 个：
- ::before
- ::after
- ::first-letter
- ::first-line
常见的伪类：
- :hover
- :first-child
Ⅰ.常用的选择器优先级
行内样式 > id选择器 > class选择器 > 元素选择器
（2）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS优先级</title>
<style type="text/css">
#first{
color:skyblue; /*id选择器，权值为 100*/
}
.class{
color:greenyellow; /*class选择器，权值为10*/
}
div{
color:lightpink; /*元素选择器，权值为1*/
}
</style>
</head>
<body>
<div id="first" class="happy">
2020/10/1，各位，双节快乐！！
</div>
</body>
</html>
<!--
id选择器权重最高，因此最终颜色为skyblue；
另外注意，不要只从样式顺序来判断，因为只有选择器权重相同时，才会遵从“后来者居上”原则。
-->
指定样式冲突示例1.png
② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS优先级</title>
<style type="text/css">
#outer p{
/*后代选择器，权值为 100 + 1 = 101 */
color:skyblue;
}
#outer .inner{
/*后代选择器，权值为100 + 10 = 110 */
color:greenyellow;
}
#outer p strong{
/*权值为100 + 1 +1 = 102 */
color:lightpink;
}
#outer p span strong{
/*权值为100 + 1 + 1 + 1 = 103 */
color:lightpink;
}
</style>
</head>
<body>
<div id="outer">
<p class="inner">
<span>
<strong>
2020/10/1，各位，国庆节、中秋节快乐！！
</strong>
</span>
</p>
</div>
</body>
</html>
<!--
strong标签最终颜色为 亮粉色(lightpink)，我们可以看到权值中 #outer .inner 的权重最大，那为何不显示#outer .inner中定义的天蓝色(skyblue)。
-->
指定样式冲突示例2.png
Ⅰ.分析
其实之所以产生这种疑问，那是因为我们还没有真正地理解“指定样式冲突”是怎样一回事。
所谓的指定样式冲突，指的是“当前元素”的样式发生冲突。
在本例中，我们所针对的当前元素是
strong，然而“# outer inner{}”针对的元素是p( strong的祖先元素)并不是 strong 准确来说，如果当前元素为 strong，那么“# outerinner{}”和“# outer p”都属于继承样式。在继承样式中，我们是不能用选择器权重这一套东西来计算的。进而总结如下：
Ⅱ.总结
在
CSS中，选择器权重的计算只针对指定样式(当前元素)，并不能用于继承样式。
4.继承样式与指定样式冲突
（1）指定样式获胜
当继承样式和指定样式发生冲突时，指定样式获胜。
（2）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS优先级</title>
<style type="text/css">
body{
/*权值为：1*/
color:orangered;
}
#outer{
/*权值为：100*/
color:#FFC0CB;
}
#outer .inner{
/*权值为：110*/
color: #00FFFF;
}
span{
/*权值为：1*/
color: #DDA0DD;
}
strong{
/*权值为：1，但这是指定样式*/
color: #FFD700;
}
</style>
</head>
<body>
<div id="outer">
<p class="inner">
<span>
<strong>
2020/10/1，各位，国庆节、中秋节快乐！！
</strong>
</span>
</p>
</div>
</body>
</html>
继承样式与指定样式冲突示例1.png
Ⅰ.分析
由于
CSS的继承性,strong元素分别从body、div和p这三个元素继承了 color属性，但这些都属于继承样式。最后,由于
strong {color: Black;}这一句指定了strong元素的color属性，也就是指定样式，因此最终strong元素的color属性为 #FFD700。
Ⅱ.总结
对于样式冲突，我们不能笼统地用权重值来计算。
在CSS中,选择器权重值的计算只针对指定样式(当前元素),并不能用于继承样式继承样式和指定样式发生神突时,指定样式获胜。我们先判断指定样式,然后才考样式。
5.!important
在CSS中，我们可以使用!important规则来改变样式的优先级。
（1）覆盖其它所有样式
如果一个样式使用
!important来声明，则这个样式会覆盖CSS中所有其它样式声明。你可以这样理解，如果你一定要使用某个样式属性，为了不让它被覆盖，那么你就可以使用
!important来实现。也可以这样理解，如果你想要覆盖其它所有样式，可以使用
!important来实现。
（2）!important两种使用情况
在CSS中，
!important常见有以下两种使用情况：
① 情况一
在外层有
id选择器的情况下（也就是高权值），你怎样让元素选择器（也就是低权值）里定义的样式得到应用。（简单来讲，低权值的样式胜过高权值的样式而得到应用）
在这种情况下，如果不使用
!important，则第一条样式永远比第二条样式优先级更高。
Ⅰ.例1
#happy p{
color:yellow;
}
p{
color:pink !important; /*这样一来，低权值的元素标签，就得到了应用*/
}
② 情况二
在和小伙伴们一起做项目时，我们可能会碰到这种情况：你或者小伙伴写了一些效果不尽如人意的行内样式（行内样式优先级往往是最高的），假如你要在内部样式表或外都样式表中修改这个样式，你就应该想到在内部样式表或外都样式表中使用
!important来覆盖那些糟糕的行内样式。
Ⅰ.例
比如说：有人在
jQuery中写了不尽如人意的行内样式，而你需要在CSS文件中修改这些样式。
（3）如何覆盖 important
想要覆盖
!important声明的样式很简单,共有两种解决方法：
① 使用相同的选择器,再添加一条!important的css语句
不过这个
CSS语句得放在后面。因为在优先级相同的情况下，后面定义的会覆盖之前的。(后来者居上原则)
②使用更高优先级的选择器,再添加一条!important的css语句
使用
!important可以将样式提升到最高级，不管这个样式是在哪个选择器中。如果在同一样式中出现了多个
!important，则遵循后来者居上原则。
（4）实际开发
在实际开发的过程中，我们经常会遇到写在后面的被写在前面的样式覆盖了，这时就应该考虑一下是否是
CSS优先级引发的问题。了解
CSS优先级规则，能够为我们提高不少开发效率。对于样式冲突这五种情况，我们只需要认真地把每一个规则都理解一遍就可以啦，而并不需要记住。在我们经过一定的实战之后，自然会有深刻的理解。
（5）CSS优先级的黄金定律
对于
CSS优先级，主要有以下两个黄金定律:
- 优先级高的样式覆盖优先级低的样式。
- 同一优先级的样式，后定义的覆盖先定义的，也就是“后来者居上”原则。
（6）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>CSS优先级</title>
<style type="text/css">
#outer strong{
/*权值：100+1 = 101 */
color:#FFC0CB;
}
#outer .inner strong{
/*权值：100+10+1 = 111 */
color: #00FFFF;
}
.inner strong{
/*权值：10+1=11*/
color: #DDA0DD;
}
.inner span strong{
/*权值：10+1+1=12*/
color: #FFD700;
}
strong{
color:#66A9FE !important; /*权值最高*/
}
</style>
</head>
<body>
<div id="outer">
<p class="inner">
<span>
<strong>
2020年10月1日，各位，国庆节、中秋节快乐！！
</strong>
</span>
</p>
</div>
</body>
</html>
!important示例1.png
Ⅰ.分析:
#outer .inner strong权值最高，但由于“ strong()”中应用了!important，因此strong元素 color属性值最终为 #66A9FE。
网友评论