html中选择器的优先级别是,CSS优先级之计算选择器的特殊性( Selector’s specificity )...
关于css优先级的问题我想也困扰过很多人,特别是我今天发这篇文章里面所说这种情况,本文内容是截取自KB005:CSS层叠文章中的关于计算选择器的特殊性( Selector’s specificity )部分,下面直接进入主题吧!
选择器的特殊性是在相同来源,相同重要性的规则之间判定最终哪个规则会起作用。 比如, 同是开发者自己定义的样式,并且,没有使用 “!important” 规则,这样的样式才可以计算特殊性。
根据层叠顺序,优先级相同的样式,如何判断哪一条声明会起作用,取决于对其选择器特殊性的计算值。
例如,都是作者样式,并且没有使用 ‘!important’ 规则:
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con {
background-color: yellow;
}
div {
background-color: black;
}
#c2 div {
background-color: blue;
}
#c2 #content {
background-color: red;
}
如上代码中,多个样式中的 ‘background-color‘ 同时作用于 content,那么最后,到底 content 应该会是什么颜色呢?
这就应该求助于选择器特殊性的计算规则了。
特殊性的值可以看作是一个由四个数组成的一个组合,用 a,b,c,d 来表示它的四个位置。 依次比较 a,b,c,d 这个四个数比较其特殊性的大小。比如,a 值相同,那么 b 值大的组合特殊性会较大,以此类推。 注意,W3C 中并不是把它作为一个 4 位数来看待的。
a,b,c,d 值的确定规则:
如果 HTML 标签的 ‘style’ 属性中该样式存在,则记 a 为 1;
数一下选择器中 ID 选择器的个数作为 b 的值。比如,以上样式中包含 ‘#c1’ 和 ‘#c2’ 的选择器;
其他属性以及伪类(pseudo-classes)的总数量是 c 的值。比如,上面例子中的 ‘.con’,’:hover’ 等;
元素名和伪元素的数量是 d 的值;比如上面例子中的 ‘div’。
现在,应用上面的规则,计算例子中各个样式的特殊性的值,结果为:
div {
width: 100px;
height: 100px;
}
#c1 #c2 div.con { /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */
background-color: yellow;
}
div { /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
background-color: black;
}
#c2 div { /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */
background-color: blue;
}
#c2 #content { /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */
background-color: red;
}
可见,’#c1 #c2 div.con” 的特殊性( [0,2,1,1] )最高,是背景色应该是黄色。
html中选择器的优先级别是,CSS优先级之计算选择器的特殊性( Selector’s specificity )...相关推荐
- css对应的优先级,新手学习css优先级
css不是一种程序语言,而是一种描述语言.因此,可以说,css理解起来是非常容易的,大部分人通过简单的学习就可以懂得如何写css代码来定义网页的样式.但是,大部分人同样也会在写css的过程中产生很多困 ...
- html类选择器和id选择器,CSS Id 和 Class选择器
CSS Id 和 Class选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. 一.id 选择器 id 选择 ...
- 面试总结(CSS 的盒模型?、CSS 中选择器的优先级以及 CSS 权重如何计算?、CSS 中哪些属性可继承,哪些不可以?、CSS 单位中 px、em 和 rem 的区别?、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
- ***CSS魔法堂:选择器及其优先级
一.前言 首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::fir ...
- html中基本选择器的优先级,CSS_CSS中的各种选择器与样式优先级小结,优先级:由高到低(从上到下)- phpStudy...
CSS中的各种选择器与样式优先级小结 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,0) 伪类/属性 元素:(0,0,0,1 ...
- CSS魔法堂:选择器及其优先级
一.前言 首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::fir ...
- html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型 盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
- CSS(一):CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性;CSS选择器;尺寸和颜色单位、背景和文本设置
目录 一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
- CSS样式内联选择器选择器优先级伪类顺序
日期:2020-10-02 作者:19届WY 标签:CSS选择器相关内容 一.html简介&CSS简介 == html简介 : 结构:决定网页的结构及内容,即"显示哪些内容" ...
- css选择器优先级及,CSS选择器优先级(转)
1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一 ...
最新文章
- Mac Eclipse上Android SDK manager闪退的问题!!
- FastJson 打Release 包解析失败
- 深入SecureFile—新一代LOB揭秘000
- js --- for in 和 for of
- Python入门篇-高级数据类型集合(set)和字典(dict)
- java ifpresent_java映射的merge、compute、computeIfAbsent、computeIfPresent的使用
- bzoj1128 Lam-lights
- matlab把符号数,Matlab 符号与数值之间的转换
- ELMAH--Using HTTP Modules and Handlers to Create Pluggable ASP.NET Components 77 out of 90 rated th
- python线性回归做预测_python-线性回归预测
- CS224N WINTER 2022(三)RNN、语言模型、梯度消失与梯度爆炸(附Assignment3答案)
- MySQL命令执行sql文件的两种方法
- php获取openid 40163报错,微信支付授权获取 openId {\errcode\:40163,\errmsg\:\code been used, hints: [ req_id:...
- 利用sublime的package Control安装插件
- QML树控件TreeView的使用(上)
- 大一python基础编程试卷_2020年大学慕课Python编程基础试题及答案
- 从壹开始[ 做贡献 ]之三 || 北京.Net俱乐部活动——DNT精英论坛开幕
- idea中如何添加Tomcat镜像并配置项目
- 周志华教授力作,豆瓣10分好评,集成学习如何破解AI实践难题 | 赠书
- Linux 设备树下的 platform 驱动实验基于正点原子IMX6ULL开发板