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 特异性看这篇就行了相关推荐

学习软件测试需要掌握哪些知识点呢（看这篇就行了）
我24岁才正式投身进入软件测试行业:没有进行过专业的技能培训,都是一边工作一边学习,成长效率太低. 经过自己这几个月的工作,总结了一些软件测试的学习路线,能避免一些弯路算是帮到大家的. 一.对于软件测 ...
Java后端新人入职第一天，环境搭建，全看这篇就行了
本文主要是记录一下一个新人java后端开发来到一个新公司,如何快速将自己的相关开发环境搭建好,包括Java.Maven.Tomcat.idea.Redis.Mysql等等,有的公司会有相关版本的要求, ...
推荐测试用例管理工具，看这篇就行。
我们在考虑测试用例管理的时候,其实不能单纯考虑测试用管理,因为你的测试用例是需要和需求关联起来的,是需要和 bug 关联起来的.在有些行业,比如汽车.医药,不仅要对需求进行测试,还需要对架构设计.详细 ...
CompletableFuture使用详解（全网看这一篇就行）
Java8 CompletableFuture 用法全解_孙大圣666的博客-CSDN博客_completablefuture CompletableFuture使用详解(全网看这一篇就行)_代 ...
使用anaconda安装pytorch——看这一篇就行了
开门见山我的电脑里有python编译器如何装pytorch框架? 答--用anaconda进行安装翻阅了n多的文章发现一个真理看得越多越容易出问题那这里我针对每一个需要实现的目的只放一 ...
Vue开发入门看这篇文章就够了
摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
vue开发看这篇文章就够了 vue知识大全
Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的 ...

CSS 特异性看这篇就行了