CSS 特异性看这篇就行了
Posted 浪漫主义码农
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 特异性看这篇就行了相关的知识，希望对你有一定的参考价值。
CSS 特异性
背景：在我每次画界面的时候，总会出现样式冲突、样式污染、一级很多样式改不掉的问题。所以总结一文来彻底搞懂css样式的特异性，方便你我他。
什么是css特异性？
如果有多个属性或者选择器，同时指向同一元素的CSS冲突 ，那么优先使用什么样式规则。那么便有了特异性的概念。
特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。
简单来说：CSS特异性就是CSS样式选择器的权重计算。从而让哪些样式应用到元素上。
特异性层次
每一种选择器都有自己的权重，依次是
行内样式 > ID选择器 > 类、属性、伪类 > 元素、伪元素选择器
我们来个例子说明一下：
代码：
<body>
<div id="id1" class="class1" style="background: blue;">说明行内样式最强</div>
<div id="id2" class="class2">id排第二</div>
<div class="class3">类、属性、伪类</div>
<div>元素选择器最后</div>
</body>
<style>
/* 元素选择器 */
div
width: 100px;
height: 100px;
background-color: rgba(93, 171, 195, 0.931);
display: inline-block;
/* id选择器 */
#id1,#id2
background-color: red;
/* 类选择器 */
.class1,.class2,.class3
background: orange;
</style>
效果:
可以说明上面的选择器权重是不同的。
权重计算特异质
这么多选择器，那是不是我写一个行内样式其他样式就全部没用了呢？NONONO，这个时候我们就要来计算权重了。
我们以一个 0 0 0 0 四位数为样式的权重总和
从最低的元素、伪元素选择器 在个位+1 就是 0 0 0 1
类、属性、伪类 在十位数+1 就是 0 0 1 0
ID选择器 在百位数+1 就是 0 1 0 0
行内样式 在千位数+1 就是 1 0 0 0
比较每一个权重值的总和，大的样式优先。
例子：
<body>
<div id="main">
<div class="content">
<p class="name">浪漫主义码农</p>
<p class="hobby">爱好打篮球</p>
<p class="eat">是个吃货</p></p>
</div>
</div>
</body>
<style>
/* 权重 0 0 0 1 */
p
color: red;
/* 权重 0 0 1 0 */
.name
color: blue;
/* 权重 0 0 2 1 */
.content p:nth-child(1)
color: chartreuse;
</style>
效果：
计算就是这样计算的。但是如果有相同权重的，就按照定义的顺序优先的样式
补充
除了上述的选择器外，通用选择器* 权重为0 0 0 0 为最低
!important 表示 非必要不使用，是比行内样式更为重要，是权重最高的，无视其他。
例子：当我给最低的权重加一个!important
<body>
<div id="main">
<div class="content">
<p class="name" style="color: chartreuse;">浪漫主义码农</p>
<p class="hobby" style="color: chartreuse;">爱好打篮球</p>
<p class="eat" style="color: chartreuse;">是个吃货</p></p>
</div>
</div>
</body>
<style>
/* 权重 0 0 0 2 */
p:nth-child(1)
color: red !important;
/* 权重 0 0 1 0 */
.name
color: blue;
</style>
效果：
写在最后
如果有误，欢迎大佬们评论指出。
💌 慢品人间烟火色，闲观万事岁月长 💌
一个心怀浪漫宇宙，也珍惜人间日常的码农
以上是关于CSS 特异性看这篇就行了的主要内容，如果未能解决你的问题，请参考以下文章
如何为长辈设置 iPhone/iPad？看这篇就行了 | 有用功