css选择器优先级全解析
这样一个问题:
- <!doctype html>
- <htmllang="en">
- <head>
- <metacharset="UTF-8">
- <title>CSS Selectors Level</title>
- <styletype="text/css">
- .inner:not(#outer) p{color: blue;}
- .outer .inner p{color: orange;}
- </style>
- </head>
- <body>
- <divclass="outer">
- <p>outer</p>
- <divclass="inner">
- <p>inner</p>
- </div>
- </div>
- </body>
- </html>
猜猜是什么颜色?
蓝色。
为什么呢?为啥:not伪类选择器的优先级会比类选择器还高?搜索了一下,发现了知乎上@一丝大大的一篇回答。
规范中已经写的很清楚:
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
计算选择器里面的class选择器,属性选择器,伪类选择器的个数(=b)
在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a、b、c三个标记来计算,
其中:
- ID选择器「如:#header」的个数(=a)
- Class选择器「如:.foo」、属性选择器「如:[class]」、伪类「如::link」的个数(=b)
- 标签选择器「如:h1」、伪元素「如::after」的个数(=c)
- 忽略「*」选择器
- 虽然伪类(如:hover)参与CSS优先级的计算,但是「:not」不参与计算。
- HTML style 属性内的优先级在CSS2.1中有描述(实际在浏览器的实现中它不直接参与优先级的计算)
Assigning property values, Cascading, and Inheritance
只要一个选择器的 a>0,b=0,即使另外一个选择的a=0, b=161,那么前者的权重依然更大。
例1:
- a:link{
- color: red;/* 优先级:a=0,b=1,c=1 */
- }
- .test{
- color: yellow;/* 优先级:a=0,b=1,c=0 */
- }
他们的权重(优先级)b是相等的,但是c标记中,前者大于后者,所以最终「a:link」生效显示为红色。
例2:
- div[class].main a{
- color:red;/* 优先级:a=0,b=2,c=2 */
- }
- body div a[href]{
- color:blue;/* 优先级:a=0,b=1,c=3 */
- }
由于属性选择器和class选择器都计算在b标记中,所以前者b=2>后者b=1,最终显示为红色。
切记,不要把权重简单的作为10进制数字比较其大小。
转载自:蓝飞技术部落格
css选择器优先级全解析的更多相关文章
- 看完就懂--CSS选择器优先级的计算
CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...
- 关于Css选择器优先级
今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
- CSS选择器优先级(转)
原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...
- day44:CSS选择器优先级&JS基础
目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
- 导航栏布局时遇到的问题以及解决办法 css选择器优先级
得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...
随机推荐
- mybatis中表与表之间的关联
第三天 1.mybatis处理表与表之间的关系? 比如要在帖子回复表里显示其它两张相关联表的信息. 处理的第一种方式: 1)主要的数据实体类是ReplyInfo,相关联的实体表的数据是TitleInf ...
- SQLite in Windows Store Apps
Using SQLite in Windows Store Apps : https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Using-SQL ...
- 纯脚本组装Json格式字符串
var answerStr = "["; for (var i in answer) { var data = $("input[name=QuestionItem_&q ...
- k次出现与一次出现的数字
原始的题目是这样的: Single Number II Given an array of integers, every element appears three times except for ...
- Android中如何收听特定应用安装成功的广播
一.manifest的配置 <receiver android:name=".AppReceiver"> <intent-filter> <actio ...
- C# abstract
Abstract: 1.用途:提供一个可供多个派生类共享的通用基类定义. 2.抽象类也可以定义抽象方法,方法是将关键字 abstract 添加到方法的返回类型的前面(抽象方法没有实现,所以方法定义后面 ...
- C# 特殊处理
一.日期格式化处理 private Datetime _datetime;//定义字段 数据值都存在字段里 通过修改字段来修改属性 public string Datetime//定义属性 { get ...
- 今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- wap,h5页面
网址: 1:天猫(http://m.tmall.com) 2:淘宝(http://m.taobao.com) 3:京东(http://m.jd.com) 4:网易(http://3g.163.com) ...
- HTML与CSS基础知识补遗(一)
开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.... 一. HTML中head标签 1. <meta>标签: meta标签里是一些基础的 ...