0 总览

如果发生CSS的冲突问题, 即A样式与B样式冲突

1 首先比较CSS样式的来源不同的来源有不同的优先级如果来源相同, 即同源时, 则进入下一阶段2 比较是否为内联样式如果A样式与B样式同源, 但是A样式为内联样式, 则使用A样式如果AB都为内联样式或都是外部样式, 则进入下一阶段3 比较选择器的优先级一个html标签可以由不同的方法使用不同的选择器选中而不同的选择器又有不同的优先级通过比较他们的优先级确定使用A还是使用B4 比较出现顺序的先后次序当然优先级可能也相同如果到这一步都相同的话, 那么就认为这两个样式等级相同此时按照源码出现的顺序进行覆盖即:如果A的声明在B之后, 则使用A如果B的声明在A之后, 则使用B

冲突的建立:
应当建立在某个确定的元素上, 即对同一个元素的同一个属性发生了冲突
注意, 同一个元素并非指同一种元素

1 来源

用户代理样式与作者样式

1 自己设置的(或自己引用的): 作者样式例如自己在style标签里的样式, 或者用链接引入的样式等2 网站默认的: 用户代理样式即浏览器默认的样式写个东西你没给样式, 浏览器就按自己定好的样式来一般这种样式只会有最基本的东西, 最基础的颜色等

网页样式应当掌握在网页的作者手中, 所以作者的样式的优先级应当大于浏览器默认的样式

但浏览器也必须有自己的默认样式, 否则作者没给样式就无法展示

用户样式

还有一种样式等级:浏览器可能有登录功能, 不同的用户可以设置自己的默认样式这种样式的等级处于刚才两种的之间因为如果等级高于作者样式, 那么网页作者无法掌握自己的页面展现在使用者时的样子如果低与浏览器样式那么设置了等于白设置一般不做讨论

!important

这个一般在作者样式种出现
如果出现这个那么就提升为更高的优先级

总结

等级如下:

!important 作者样式
作者样式
用户样式
用户代理样式(浏览器默认样式)

2 内联样式与外部样式

内联样式即设置在html的style属性当中的样式
又称行内样式

其专门为该元素服务, 直接作用于所在的元素
没有选择器

所以内联样式等级比外部样式高

3 选择器优先级

id选择器 > 类选择器 > 标签选择器

这其实是按精确度进行的划分

id选择器 类似于身份证号, 一个人只有一个, 直接代表了一个具体的人(元素)类选择器 类似于一类人, 代表一个你自己用具体词语描绘的一个群体, 对比于人可以类似于学生, 家长, 父母离婚的孩子等, 这个群体可能很大也可能只有一两个人其实也就是网页作者根据情况设置的元素的集合标签选择器 类似于默认的人种, 如非洲人, 中国人, 黑人等等,在CSS里相当于已经被html固定好的元素的种类

如果A与B两个样式冲突需要使用选择器优先级来判断时

首先判断二者的id选择器数量, 多的直接胜出
如果id选择器数量一样, 那么判断类选择器数量, 多的直接胜出
如果id与类选择器数量都一样, 那么判断标签选择器数量, 多的直接胜出

由上面可见:
1个id选择器>0个id选择器+ 任意多个类选择器

所以我们比较时应当从id选择器数量开始比较,一旦数量不同直接可以判断

一般判断也可以对冲突的两个样式设置三个数a,b,c
分别代表id,类,标签选择器数量
依次比较两个样式的a,b,c即可

注意:
伪类选择器和属性选择器与一个类选择器的权重一致

通用选择器(*)与组合选择器(>+~)对优先级没有影响
因为他们其实是对不同的元素一起使用样式, 而不属于对同一个元素产生样式的叠加而产生冲突

4 出现顺序

如果以上全部相同, 说明两个样式的等级一致

那么应当按照出现的先后进行确定最终样式

毕竟新的替换旧的嘛

5 本文总结

本文从一个流程图开始, 详细说明了样式产生冲突时的处理流程

而一些避免冲突或者解决冲突的技巧都是在这种判断的基础上建立来的
先要了解冲突产生时是如何确定最终样式的, 才能知道如何处理

很多文章都是直接说各类选择器的权重, 并不系统, 也不够规范
使用如上流程或许会略微复杂, 但是一步一步清晰明了, 熟练后更得心应手

希望本文对你能够有帮助

6 引用

图片引自 深入解析CSS
本文也建立在此书之上

有兴趣的可以看看这本书

侵删

一张图搞定CSS选择器的优先级相关推荐

一张图一个表——CSS选择器总结
CSS选择器总结: (这些表是一张图片^_^) 看底部完整思维导图图片和表格的下载地址:https://download.csdn.net/download/denlnyyr/10597820 (我 ...
android 视网膜黄斑检查 amsler,自测黄斑病变 | 一张图搞定
原标题:自测黄斑病变 | 一张图搞定关注很多人提到黄斑都唯恐避之不及,但你知道吗?人体也有一个重要的"黄斑"部位是必须保护的那就是眼底黄斑区,它跟我们的视觉是密切相关的. 如果 ...
【一张图搞定关机程序】让你的代码有趣起来！送兄弟送闺蜜，快乐原来如此简单！（赋全过程和结果，超详细解说）
从这里开始让你的代码有趣起来事情是这样的关机程序实现关机指令代码实现如何把程序送出去故事后续快乐传递事情是这样的你也许不会想到,简单的几行的代码居然可以带来如此多的快乐,那么事情究竟 ...
Math：利用学生计算器计算一大堆的平均数和方差思维图文教程(一张图搞定！)
Math:利用学生计算器计算一大堆的平均数和方差思维图文教程(一张图搞定!) 目录利用学生计算器计算一大堆的平均数和方差教程利用学生计算器计算一大堆的平均数和方差教程我们的学生计算器其实有很多功 ...
两张图搞定IJK源码
IJK源码两张图就可以搞定,一张是IJK从播放到停止的代码流程图,一张是IJK的线程模型图
oauth2 增加token 返回参数_一张图搞定OAuth2.0
公众号:低并发编程(dibingfa) 目录 1.引言 2.OAuth2.0是什么 3.OAuth2.0怎么写 1.引言本篇文章是介绍OAuth2.0中最经典最常用的一种授权模式:授权码模式非常简 ...
一张图搞定OAuth2.0
1.引言本篇文章是介绍OAuth2.0中最经典最常用的一种授权模式:授权码模式非常简单的一件事情,网上一堆神乎其神的讲解,让我不得不写一篇文章来终结它们. 一项新的技术,无非就是了解它是什么,为什 ...
android启动页广告图,一张图搞定APP启动页广告
之前我们产品里的启动页比较简单,就是背景色加上我们的logo.slogan等,这种形式适配起来比较容易,把元素切出来交给开发写出来就行.最近由于运营的需求,我们需要在APP启动页展示广告,广告图更新频 ...
三张图搞定TCP 握手、HTTPS、TLS加密过程
1. 抓包内容(WireShark) 2. 搞定握手.挥手.SSL加密过程 3. 消息内容(Charles) 之前看到写的比较好的文章,有文字详细叙述: TLS版本差异 https://zhuanla ...

一张图搞定CSS选择器的优先级