🚀 个人主页 极客小俊 ✍🏻 作者简介：程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步！ 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
CSS选择器权重优先级详解
概述
css选择器权重这个概念其实是很重要，因为很多时候，在实际开发当中，都会遇到这个问题,当我们在写css样式的时候，如果你所写的css样式没有效果，或者说没有生效，那么很有可能就是因为选择器权重的问题导致的!
所以接下来就跟着我来了解一下，解开css选择器权重的奥秘吧!
什么是选择器的权重?
概念:当使用不同的选择器去选中同一个元素的时候,并且也设置了相同的样式时,这个时候就会产生样式冲突，最终应用哪个选择器中的样式 由选择器的 优先级(权重) 来决定!
案例:
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#txt{
width: 100px;
height: 100px;
background:blue;
}
.txt{
width: 100px;
height: 100px;
background:yellow;
}
p{
width: 100px;
height: 100px;
background: orangered;
}
</style>
<div id="connect">
<p class="txt" id="txt"></p>
</div>
以上案例当中: #txt 、.txt、p 这三个选择器都是选择的p元素, 但应用的CSS样式却是相同的,而最终应用的样式是#txt ,我们可以通过chrnome开发者工具查看到应用的是哪个选择器!
如图
那这到底是为什么呢？这里就牵扯到了css样式的优先级权重问题!
重点注意: css样式的优先级决定了最终渲染的CSS样式, 而不是样式写在后面就会应用! 优先级要先确定之后，再来考虑相同样式的后面覆盖前面的问题!
优先级的权重值 列表
选择器的整体权重的大小也是可以根据权重值进行计算出来的!
具体权重值数据如下表
| 内联样式（行内样式） | 1000 |
| id选择器 | 100 |
| class类和 伪类选择器 | 10 |
| 元素标签选择器 | 1 |
| 通配符选择器 | 0 |
| 继承的样式 | 继承的样式没有优先级! |
具体如何计算的，我们后面在说! 我们先来看几个选择器之间权重值的区别
1.内联样式优先级案例
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#txt{
width: 100px;
height: 100px;
background: pink;
}
</style>
<div id="connect">
<p id="txt" style="background: orange;"></p><!–这个内联样式最终会被渲染到网页中–>
</div>
2.id选择器与类选择器优先级案例
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#txt{/*id选择器的样式效果会被渲染到网页中*/
width: 100px;
height: 100px;
background:green;
}
.txt{
width: 100px;
height: 100px;
background:pink;
}
</style>
<div id="connect">
<p id="txt" class="txt">id选择器的优先级比类选择器高</p>
</div>
3.类选择器与标签选择器优先级案例
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
p{
width: 100px;
height: 100px;
background:green;
}
.txt{/*类选择器的样式效果会被渲染到网页中*/
width: 100px;
height: 100px;
background:pink;
}
</style>
<div id="connect">
<p class="txt">类选择器的优先级比标签选择器高</p>
</div>
4.标签选择器与通配符优先级案例
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#connect *{
background:green;
}
#connect p{
width: 100px;
height: 100px;
font-size: 20px;
background:pink;/*这个样式会被渲染到网页*/
}
</style>
<div id="connect">
<p>标签选择器的优先级比通配符高</p>
</div>
5.继承样式没有优先级，它与任何选择器进行比较时，都会被覆盖
案例：继承样式与通配符选择器比较
解释: p元素中的span继承了p标签的样式,但上面已经说过了，继承的样式是没得优先级,也就是说比都不能跟其他选择器比! 所以最终会被权重值是100的 #connect * 这个选择器所替代，也正因为如此最后span中的样式应用的是#connect *选择器中的样式!
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#connect *{
font-size: 16px;
}
#connect p{
width: 100px;
height: 110px;
font-size: 20px;
background:pink;
}
</style>
<div id="connect">
<p>我是一个段落标签<span>我是p标签中的span元素</span></p>
<!–p元素中的span元素的字体大小会采用通配符选择器中的字体大小，也就是16px–>
</div>
权重值大小计算
前面我们了解了选择器的权重值的基本概念，那么具体来说权重值到底怎么计算的呢
当选择器中包含多种选择器时，我们需要将多种选择器的权重值相加让后在进行比较
最终权重值最高的则最优先使用!
注意选择器的优先级计算不要超过他的最大数量级, 比如说:class选择器不要以为你写很多个就可以把权重值累加器来超过id选择器这是不可能的,这一点一定要注意!
所以当样式发生冲突时，是将相关的选择器优先级进行求和计算，优先级最高的优先显示!
案例如下：
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#txt{/*这里的权重值#txt的权重100*/
width:100px;
height:100px;
background:hotpink;
}
p#txt{/*这里的权重值就是p的权重1 + #txt的权重100=101*/
width:100px;
height:100px;
background:darkcyan;
}
</style>
<div id="connect">
<p id="txt">我是一个段落标签</p>
</div>
小知识：在选择器权重相同的情况下，前面设置的样式会被后面设置的样式覆盖
也就是说如果优先级一样，则显示靠后的样式
案例如下：
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#connect>.txt2{/*这里的总权重值为100+10=110*/
width: 100px;
height: 100px;
background:black;
}
#connect>.txt{/*这里的总权重值也为100+10=110，但是页面会渲染这个选择器下面的样式*/
width: 100px;
height: 100px;
background:pink;
}
</style>
<div id="connect">
<p class="txt txt2">我是一个段落标签</p>
</div>
注意：并集选择器的权重值需要分开（单独）计算。
!important使用与注意事项
可以在样式后边添加一个!important，如果样式中添加了!important，则该样式的权重将会高于任何选择器的权重，并且优先于所有的样式，包括内联样式。
案例如下：
<style>
#connect{
width: 150px;
height: 150px;
background: greenyellow;
}
#connect>p{
width:100px;
height:100px;
background: orangered !important;
}
</style>
<div id="connect">
<p style="background: hotpink">我是一个段落标签</p>
</div>
注意事项：!important这个属性要慎用，原因是不利于后期维护，在开发过程中，css 样式可能经过多人之手，如果设置了!important，不利于别人想要按照自己的需求修改。
超级链接 a 标签元素的伪类顺序分析
前面已经提到过,在css中提供了四个a 元素的伪类选择器,他们分别是:如下
:link
:visited
:hover
:active
这四个伪类选择器的 优先级权重值是一样的! 但是要注意的就是他们在写的时候是有一个先后顺序的!
:active与:hover的顺序问题
案例:
:active与:hover的顺序问题, 先写:active,后写:hover会出现 :active无效!
代码如下:
<style>
a{
color: black;
}
a:active{
color: red;
}
a:hover{
color: pink;
}
</style>
<a href="">北京市</a>
原因解释: 因为 当你点击链接时,其实你也移入到了链接上, 所以这两个伪类都会执行, 但 a:active与 a:hover的权重值是一样,而在网页渲染的时候，后面的样式会覆盖前面的! 最后所导致的结果就是: 你点击的时候 颜色是pink 你移入的时候颜色也是pink!
解决办法 : 所以正确的写法是 :hover一定要写在:active前面 才是正确的!
<style>
a{
color: black;
}
a:hover{
color: pink;
}
a:active{
color: red;
}
</style>
<a href="">北京市</a>
:link与:visited的顺序问题
:link与:visited的顺序问题不会影响到彼此样式的渲染! 但如果写在 :hover与 :active 之后那么就会出大问题了: 也就是 :hover与 :active会无效! 如下案例
<style>
a:hover{
color: pink;
}
a:active{
color: red;
}
a:link{
color: blue;
}
a:visited{
color:cadetblue;
}
</style>
<a href="http://www.baidu.com">北京市</a>
<a href="http://www.sina.com.cn">深圳市</a>
<a href="http://www.sohu.com">上海市</a>
原因解释: 在移入到a 标签上 和 点击的时候 就不会有 a:hover 和 a:active的效果，就是因为 a:link 和 a:visited 已经覆盖了前面的 a:hover 和 a:active的 样式 , 之前已经说过了 他们四个a标签伪类 权重值都是一样的! 所以最终你只会看到 : link的效果 和 点击之后:visited的效果!
解决办法: a:link 和 a:visited 一定要写在 a:hover 和 a:active之前!
<style>
a:link{
color: blue;
}
a:visited{
color:cadetblue;
}
a:hover{
color: pink;
}
a:active{
color: red;
}
</style>
<a href="http://www.baidu.com">北京市</a>
<a href="http://www.sina.com.cn">深圳市</a>
<a href="http://www.sohu.com">上海市</a>
a 标签伪类顺序总结:
顺序如下: 按照以下顺序书写a标签伪类就不会有问题!
:link
:visited
:hover
:active
小提示: a标签测试效果问题
在测试a标签的时候，一定要把href的属性值加上,并且地址最好不要一样! 否则无法测试出a标签伪类效果!
"👍点赞" "✍️评论" "收藏❤️"
大家的支持就是我坚持下去的动力!
如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️💛💛💚💚
更多
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇
