css选择器的优先级
1. 引言
选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。
上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令?
上面还是比较简单的,下面在来一个复杂的:
上图中的<li>该显示成什么颜色呢?
2. 特指度
要解决以上问题,我们需要引入一个概念——特指度(specificity)。特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。
这个计算叫做“I-C-E”计算公式,
- I——Id;
- C——Class;
- E——Element;
即,针对一个css选择器表达式,遇到一个id就往特指度数值中加100,遇到一个class就往特指度数值中加10,遇到一个element就往特指度数值中加1。
下面举几个css表达式的特指度计算结果,大家也自己算一算,是不是对:
CSS选择器表达式 |
特指度计算结果 |
p |
1 |
p.large |
11 |
P#large |
101 |
div p#large |
102 |
div p#large ul.list |
113 |
div p#large ul.list li |
114 |
还有一个重点要注意:!important优先级最高,高于上面一切。* 选择器最低,低于一切。
好了,你现在可以返回文章一开始提出的两个问题,根据特指度计算公式计算,哪个的计算结果大,浏览器就会以哪个为优先。
3. 简版规则
如果你嫌上面的计算过于复杂,有一个简版规则。它只有三个规则,这三个规则能覆盖大多数情况,而且比较好记。
规则一,包含ID的选择器胜过包含Class的选择器,包含Class的选择器胜过包含元素的选择器;例如下图,第一个特指度更高:
规则二,不同选择器的特指度比较时,不区分加载的顺序(相同选择器在层叠时,后加载的覆盖前加载的),例如下图,虽然后加载,但是特指度低:
规则三,设置的样式高于继承的样式,不用考虑特指度。例如:
其实,大部分情况下,你通过这个简版的规则,即可判断选择器的优先级。
转载于:https://www.cnblogs.com/jiqing9006/p/5398708.html
css选择器的优先级相关推荐
- 详解CSS选择器、优先级与匹配原理
选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的 ...
- CSS选择器的优先级的相关介绍
css选择器的优先级 使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示 优先级规则(权重值 ...
- 【CSS笔记】CSS选择器的优先级(权重)
目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...
- CSS选择器的优先级是怎样的?
CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层面,优先级是由 A .B.C.D 的值来决定的,其中它们的值计算规则如下: A 的值等于 1 ...
- [转]《精通css》笔记1:css选择器与优先级
本文转自:http://www.cnblogs.com/webmoon/archive/2012/12/02/2798183.html css选择器 一.基础选择器 css基础选择器有标签选择器.类选 ...
- css选择器的优先级和权重问题
CSS选择器的种类: 1.id选择器如:(id="name",id="name_txt)(*name) 2.class选择器(如:class="head&quo ...
- 一张图搞定CSS选择器的优先级
0 总览 如果发生CSS的冲突问题, 即A样式与B样式冲突 1 首先比较CSS样式的来源不同的来源有不同的优先级如果来源相同, 即同源时, 则进入下一阶段2 比较是否为内联样式如果A样式与B样式同源, ...
- CSS——选择器及优先级
一.CSS选择器的种类 标签选择器:div 类选择器:.container id选择器:#child1 后代选择器:.container div,表示container类里面的所有div标签 子选择器 ...
- css选择器的优先级,以及用法
目录 前言 一.css选择器 二.css选择器优先级排序 三.css选择器的总结 1. !important 2.内联选择器 3.id选择器 4.类别选择器 5.属性选择器(内容较多) 6.伪类选择 ...
最新文章
- Vue3 计算属性的特性
- 推荐一款超牛逼的Web SSH 客户端工具
- 如何调用DLL (基于Visual C++6.0的DLL编程实现)
- android 一个很漂亮的控件ObservableScrollView(含片段代码和源码)
- event.keycode值大全
- HMM——前向后向算法
- Java 8:正在运行的CompletableFuture
- java学习笔记之条件语句(if...else)
- *【ZOJ - 3703】Happy Programming Contest(带优先级的01背包)
- 喜讯,Asp.net Ajax 文档提供下载
- Uvaoj 11624 - Fire!
- JBPM与设计模式之职责链模式
- Python爬虫实践(二) -- 爬虫进阶:爬取数据处理、数据库存储
- SpringBoot 分布式session
- Json简介与转换数据例子
- c语言函数实现顺序线性表,数据结构C语言实现——顺序线性表SqList
- 惠普136w耗材贵吗_不妨试一试:惠普打印机136w与m30w哪个好?有没有区别?到底坑不坑?...
- 解读后天性学者症候群:怎么一闷棍砸出个天才?
- U-Mail邮件系统管理功能 高效办公轻松搞定
- HCIP-H12-221练习题
热门文章
- linux下软件的基本安装和卸载 法一
- Cannot resolve method ‘call(java.lang.String, org.apache.flink.table.api.ApiExpression)‘
- Emachines Em350拆机更换键盘详细流程
- spark的Web UI查看DAG的两种方式
- django_mailgun.MailgunAPIError: Response [401]
- CNN中的权重维度解析以及卷积核中的数值是怎么确定的
- pandas:数据规范化方法与python实现
- qtp连接mysql 无驱动_QTP连接MySQL
- python随机生成10个整数列表_python_随机产生10个整数后找出最小值,最大值。
- 利用zookeeper实现分布式服务故障自动剔除/服务自动注册的思路