【CSS】选择器优先级
CSS的选择器优先级的权重
在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a、b、c三个标记来计算
a: ID选择器 如#header
b: class选择器如.header 属性选择器如[title] 伪类如:link
c: 标签选择器如h1 伪元素选择器如::after
注意:伪类:not不参与优先级的计算
一些例子
只要一个选择器的 a>0,b=0,即使另外一个选择的a=0, b=161,那么前者的权重依然更大。
a:link{color: red; /* 优先级:a=0,b=1,c=1 */
}.test{color: yellow; /* 优先级:a=0,b=1,c=0 */
}
他们的权重(优先级)b是相等的,但是c标记中,前者大于后者,所以最终「a:link」生效显示为红色。
:not() 不参与优先级的计算 但()里面的选择器要计算在内
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS Selectors Level</title><style type="text/css">.inner:not(.outer) p {color: red;}.outer .inner p {color: orange;}</style>
</head><body><div class="outer"><p>outer</p><div class="inner"><p>inner</p></div></div>
</body></html>
这个inner会显示orange 因为两个优先级相同,下面的会覆盖上面的
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS Selectors Level</title><style type="text/css">.inner:not(#outer) p {color: red;}.outer .inner p {color: orange;}</style>
</head><body><div class="outer"><p>outer</p><div class="inner"><p>inner</p></div></div>
</body></html>
而这个例子会显示蓝色,上面的:not()内的id选择器也要计算在内
参考链接:
1.知乎的讨论:http://www.zhihu.com/question/21777264
2.某博客:http://www.clanfei.com/2013/11/1731.html
转载于:https://www.cnblogs.com/lijie33402/p/4595418.html
【CSS】选择器优先级相关推荐
- CSS 选择器优先级与效率优化
CSS选择器优先级与效率优化 Date: 7th of Aug, 2015 Author: HaoyCn 本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇. 各类选择器的优先级 import ...
- 谁动了我的选择器?深入理解CSS选择器优先级
深入理解CSS选择器优先级
- css选择器优先级和photoshop快捷键以及100度享乐网框架
css选择器优先级 CSS选择器的优先级:作用的元素一样,样式一样,就会有优先级问题,当优先级相同时,一旦发生重叠,以样式后面为主 CSS选择器:统配选择器,类选择器,标签选择器,id选择器,后代选择 ...
- html5选择器优先级,css选择器优先级怎么比较
css选择器优先级怎么比较 CSS选择器中比较常见的有标签选择器.ID选择器.类选择器以及子选择器.而事实上,CSS选择器如果细分下来,竟然多达40多种.那他们的优先级该怎么比较呢,下面就来看看吧. ...
- css选择器优先级深入理解
css基础选择器有标签选择器.类选择器.id选择器.通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助 一.基础选择器 css基础选择器有标签选择器.类选择器 ...
- css选择器优先级顺序是什么?css基本选择器优先级的介绍
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 打造全网we ...
- css选择器优先级问题
css选择器优先级问题(选择器的权重图) A.为啥有此问题的产生? a.众所周知,css对于同一属性先进行优先级别的判断,若比之前渲染的优先级别高,那么就会渲染成这个优先级别较高的. b.对于单一的选 ...
- css选择器优先级及,CSS选择器优先级(转)
1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一 ...
- CSS选择器优先级详解
1. 优先级分级 按照优先级从高到低排列: 1. ! important .foo{color:red !important } !important是顶级优先级,唯一推荐使用它的场景为忽略JS脚本设 ...
- html5css选择器优先级,CSS选择器优先级[重要]
CSS选择器优先级 浏览器是通过判断CSS优先级,来决定到底哪些属性值是与元素最为相关的,从而作用到该元素上.CSS选择器的合理组成规则决定了优先级,我们也常常用选择器优先级来合理控制元素达到我们理想 ...
最新文章
- android studio安装在其他盘,Android Studio配置移动到D盘(亲测)
- VS2019中接连MySQL全部过程
- DELPHI获取网卡MAC地址 转
- 使用 Composer 为 ThinkPHP(3.2.3)框架添加和管理组件
- MSsql server里日期不能直接存入date字段,要转换一下
- TypeScript 3.5 发布,速度提升、工具智能
- 年终将至,手把手教你做一份亮眼的年终总结报告
- 【ArcGIS|空间分析】数据采集处理(全国大学生GIS技能大赛试题)
- 节约里程法matlab程序_物流配送路径优化研究 毕业论文.doc
- Java的8种基本数据类型
- OFDM系统中的信号检测算法分类和详解
- 鸿蒙形容欣欣向荣发展,比喻事业蓬勃发展繁荣兴旺的成语蒸蒸日上
- 简要描述服务器虚拟化四大特性,虚拟化的四大特性
- Enhancing Diversity in Teacher-Student Networks via Asymmetric branches for Unsupervised reid论文解读
- 机器学习之手写数字图片数据处理及识别
- 打开window常用程序快捷命令
- 软件测试二分查找函数,二分查找
- 005永磁同步电机的数学模型:写了很久,非常适合零基础的同学学习参考
- Gson解析json字符串,并封装成ListT
- sql执行顺序及性能优化
热门文章
- Cucumber入门之_World
- 激光投影市场将保持产品多元化发展趋势
- spring 定时任务执行两次解决办法
- 避免button处理事件过程中 点击按钮触发事件的方法
- python 文件和目录操作
- 东方卫视演得泰坦机器人_机器人“舞林大会”燃爆全民定向运动大赛
- html js定义json对象,javascript中的json及对象
- zend framework1.11使用原生代码获取结果
- C#连接sqlserver windows 和 sqlserver 身份验证的两种连接字符串
- python进程、线程的学习心得