CSS选择器优先级的计算

一、什么是选择器的优先级

既然是深入了解,那么我们肯定先要知道什么是选择器的优先级,这里我就直接引用MDN Web Docs的解释。

浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

看概念总是抽象的,最直观的感受就是: 你为页面上的同一个元素设置多个属性,有时候设置的一个样式死活没有生效,这时候您遇到的很可能就是CSS选择器的优先级问题了。


* {
margin: 0;
padding: 0;
}
body .box1{
width: 300px;
height: 300px;
background-color: orange;
}
.box1{
/*样式将无法生效*/
/*因为这个选择器的优先级不够body .box1高*/
background-color: red;
} <div class="box1">
我的样式涉及到了选择器优先级问题
</div>

二、优先级的计算与比较(一)

那首先我们就必须知道CSS各选择器(这里还一些特殊声明)之间的基础优先级是如何的

!important > 内联样式 > id选择器 > 类/伪类选择器 > 标签/伪元素选择器 > 通配选择器 > 继承的样式

我们可以量化上面说到的选择器基础优先级
!important 9999
内联样式 1000
id选择器 100
类/伪类选择器 10
标签/伪元素选择器 1
通配选择器 0
继承的样式 不存在优先级 那么就能计算出最开始里例子中个个选择器的优先级,从而判断出最终应用的样式 /*优先级为: 1 + 10 = 11*/
body .box1{
width: 300px;
height: 300px;
background-color: orange;
} /*优先级为: 10*/
.box1{
background-color: red;
}

优先级的计算还具有以下条件:

  1. 优先级具有可加性
  2. 选择器优先级不会超过自身最大数量级
  3. 同等优先级情况下,后写的覆盖前写的
  4. 并集选择器之间的优先级是独立的

我来为大家一个个解释:

优先级具有可加性
这个很简单就能知道
/*优先级都是能够简单相加的: 11*/
p.box1{
width: 100px;
}
选择器优先级不会超过自身最大数量级

上面我们解释了优先级的可加性,那么有些丧心病狂的人可能就会想,既然优先级能够简单相加,那我直接用多个低优先级的选择器相加不就能够突破优先级的问题? 我想说:too young, too simple!

/*优先级: 100*/
#box1{
background-color: red;
} 优先级不能超过自身最大量级: 99 /*全是类选择器,优先级为: 90 */
.a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11{
background-color: blue;
} <div id="box1" class="a1 a2 a3 a4 a5 a6 a7">
我是红色的
</div>
同等优先级情况下,后写的覆盖前写的
#box1{
width: 100px;
} #box1{
width: 200px;
} <div id="box1">
宽度为200px
</div>
并集选择器之间的优先级是独立的
/*优先级有两个*/
/* 标签选择器:1 */
/* id选择器: 100 */
p,
#box1{
background-color: orange;
}

优先级的计算与比较(二)

刚刚已经介绍完了第一种选择器优先级的计算方式,不得不说还是比较复杂的。现在就为大家介绍第二种优先级的计算方式,也是我个人比较推荐的一种。

我们假定优先级的计算由A、B、C、D四个项的值来决定
1. 判断是否存在内联样式,存在A=1, 否则A=0
2. B的值是id选择器出现的次数
3. C的值是类选择器出现的次数
4. D的值是标签选择器出现的次数

简单来看两个例子:

#box1 ul > li > a.myClass{
width: 100px;
} 没有内联样式:A=0
一个id选择器:B=1
一个类选择器:C=1
三个标签选择器: D=3 综上,优先级为: 0 1 1 3
#box1 ul > li > a.myClass{
width: 100px;
}
<div id="box1" style="height:100px;"></div> 有内联样式:A=1
一个id选择器:B=1
一个类选择器:C=1
三个标签选择器: D=3 综上,优先级为: 1 1 1 3

优先级已经计算出来了,那么接下来就是如何去比较的问题了:

  1. 从左到右比较
  2. 有一个值大于另一个值则比较完毕
    1. 上面例子中0113与1113比较,第一位的0小于1所以1113的优先级较大
  3. 如果从左到右全部值相等,则后写的样式覆盖前面写的

写在最后

这是我的第一篇博客,我是一名正在学习前端的小白,有错误的地方希望大家能够多多谅解与指出,一起努力、加油吧!

看完就懂--CSS选择器优先级的计算的更多相关文章

  1. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  2. css 选择器优先级的计算过程

    以下转自互联网 下面看看官方对选择器的定义:一个选择器的优先级由四个数字a,b,c,d确定.当比较两个选择器时,先比较a,a值大的优先级高,如果a相等则比较b,b值大的优先级高,以此类推.因此,无论b ...

  3. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  4. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  5. 深度剖析HashMap的数据存储实现原理(看完必懂篇)

    深度剖析HashMap的数据存储实现原理(看完必懂篇) 具体的原理分析可以参考一下两篇文章,有透彻的分析! 参考资料: 1. https://www.jianshu.com/p/17177c12f84 ...

  6. CSS选择器优先级(转)

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  7. [转帖]Linux shell中2>&1的含义解释 (全网最全,看完就懂)

    Linux shell中2>&1的含义解释 (全网最全,看完就懂) https://blog.csdn.net/zhaominpro/article/details/82630528   ...

  8. 2018前端面试总结,看完弄懂,工资少说加3K | 掘金技术征文

    2018前端面试总结,看完弄懂,工资少说加3K | 掘金技术征文:https://juejin.im/post/5b94d8965188255c5a0cdc02

  9. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

随机推荐

  1. c++ stl nth_element 原理解析

    nth_element是stl中的一个库函数,它会使迭代器nth所指的元素与整个[first,last)完整排序后.同一个位置的元素同值.即找到完整排序时第n位的正确值. 但这个函数与完整排序的区别在 ...

  2. Codeforces Round #644 (Div. 3)

    比赛链接:https://codeforces.com/contest/1360 A - Minimal Square 题意 计算能包含两个 $a \times b$ 矩形的最小正方形的面积. 题解 ...

  3. AtCoder AIsing Programming Contest 2020 D - Anything Goes to Zero (二进制,模拟)

    题意:给你一个长度为\(n\)的\(01\)串,从高位到低位遍历,对该位取反,用得到的十进制数\(mod\)所有位上\(1\)的个数,不断循环直到为\(0\),输出每次遍历时循环的次数. 题解:根据题 ...

  4. [Golang]-2 Map关联数组与下划线(_)的意义

    目录 map 下划线(underscore) 用在import 用在返回值 用在变量 map map 是 Go 内置关联数据类型(在一些其他的语言中称为哈希 或者字典 ). func main() { ...

  5. python argparse (更新中)

    action='store_true' 例如 parser.add_argument("--generate_text_embedding", action='store_true ...

  6. codeforce 849A

    A. Odds and Ends time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  7. Unknown command '\b'. 关于Mysql导入外部数据库脚本报错的解决

    来自网络转载 还是字符集的问题 使用source导入外部sql文件: mysql> source F:\php\bookorama.sql;--------------source F:---- ...

  8. HDU 6611 K Subsequence(Dijkstra优化费用流 模板)题解

    题意: 有\(n\)个数\(a_1\cdots a_n\),现要你给出\(k\)个不相交的非降子序列,使得和最大. 思路: 费用流建图,每个点拆点,费用为\(-a[i]\),然后和源点连边,和后面非降 ...

  9. Spring(二) Mini版Spring的实现

    实现思路 先来介绍一下 Mini 版本的 Spring 基本实现思路,如下图所示: 自定义配置 配置 application.properties 文件 为了解析方便,我们用 application. ...

  10. 第一个SpringMVC项目——HelloMVC

    第一步:启动IDEA新建一个无模板的Maven项目,注意这还不是一个web项目,想成为web项目,需要添加web框架,这就是第二步需要做的事情 第二步:添加web框架支持 单击之后会弹出这个界面 第三 ...