详解CSS中的特指度和层叠问题


Posted in HTML / CSS onJuly 15, 2021

前言

Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢?

A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突,特指度最高的声明胜出。而为了计算特指度,用户代理必须把规则“打散”成单独的规则

例如:h1 { color: silver; background: black; } 将变成以下形式。二者的特指度都是 0,0,0,1 ,赋予每个声明的值就是它

h1 { color: silver; } 
h1 { background: black; }

3.1 特指度

特指度(或权值):表示一个css选择器表达式的重要程度

选择符的特指度由选择符本身的组成部分决定。一个特指度值由四部分构成,例如:0,0,0,0

 

  重要声明 行内样式 ID选择符 Class Element 通用选择符
特指度值 优先级最高 1,0,0,0 0,1,0,0 0,0,1,0 0,0,0,1 0,0,0,0

重要声明注意:

  • 重要声明要在声明末尾的分号之前插入 !important 。!important 的位置必须正确,否则声明将失效
  • 带有 !important 的声明对特指度没有影响,但它会与不重要的声明分开处理

所有带 !important 的声明会放在一起,而特指度冲突就在这个范围内解决
非重要的声明作为一个整体,其中的冲突使用特指度解决
当重要声明和非重要声明冲突时,重要声明始终胜出

特指度写法注意:

  • 特指度值是从左向右比较的。特指度 1,0,0,0 比所有以 0 开头的特指度大,不管后面的数字有多大
  • 通用选择符不增加特指度,它的特指度是 0,0,0,0 ,这与没有特指度是不同的
  • 连接符没有特指度,即连零都没有

3.2 继承

继承:是指把一个元素的某些属性值传给其后代的机制(某些样式不仅应用到所指元素上,还应用到元素的后代上)

  • 把声明应用到可以继承的元素上后,那个元素将使用声明的样式渲染;这个值继续沿着树状图向下传播到后代元素,直到没有后代为止
  • 属性值绝不向上传播,即元素的样式绝不传给祖辈元素
  • 在HTML中,向上传播规则有个例外:应用到body元素上的背景样式会传给HTML元素。HTML时文档的根元素,用于定义渲染文档的画布。这一例外仅发生在为body元素设定了背景,而没有为html元素定义背景的情况下

注意事项:

  • 很多属性是不继承的,这通常是为了避免得到意外的结果
  • 继承的值没有特指度,连零都没有

案例:因为通用选择符应用于全部元素,而且特指度为零,所以它声明的颜色gray击败继承的颜色black(由于继承的值没有特指度),因此,em元素渲染为灰色,而不是黑色

* { color: gray; }
h1#page-title { color: black; }

<h1 id="page-title">
	Meerkat	<em>Central</em>
</h1>
<p>Welcome to the best place on the web for meerkat information!</p>

3.3 层叠

层叠:是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值

CSS层叠规则:

  • 按显示权重排序,以 !important 标记的规则比没有这一标记的权重高

如果两个规则应用到同一个元素上,而其中一个以 !important 标记,那么有此标记的规则胜出

  • 如果显示权重相同,就要考虑规则的来源。声明有三个来源:创作人员、读者、用户代理

读者提供的样式中以 !important 标记的声明

创作人员编写的样式中以 !important 标记的声明

创作人员编写的常规声明读者

提供的常规声明

用户代理的默认声明

  • 如果各声明的显示权重和来源相同,那么应该按特指度排序,特指度高的声明胜出
  • 如果两个规则的显示权重、来源和特指度都相同,那么在样式表中的位置靠后的规则胜出

 

 

重要声明:!important 

 

Class:类选择符、属性选择符、伪类选择符 

Element:元素选择符、伪元素选择符 

 

到此这篇关于CSS中的特指度和层叠的文章就介绍到这了,更多相关css特指度层叠内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
html form表单基础入门案例讲解
html+css实现环绕倒影加载特效
html5表单的required属性使用
Jul 07 #HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 #HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
关于CSS浮动与取消浮动的问题
html5调用摄像头实例代码
Jun 28 #HTML / CSS
You might like
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
JS通过位运算实现权限加解密
2018/08/14 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
了解重排与重绘
2019/05/29 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Python中文件操作简明介绍
2015/04/13 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
财务会计专业推荐信
2013/11/30 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
优秀交警事迹材料
2014/01/26 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python