在css中,有可能给同一个元素属性定义两次不同的数值。如:
h1 { color: red }
body h1 { color: red }
此时给h1定义了两种颜色,但是h1不可能有两种颜色,以上两种颜色只有一种能匹配h1的颜色。
而哪个颜色将会匹配h1,此时就需要了解css选择器的特殊性。
对于每一个规则,用户代理会计算选择器的特殊性,并将该特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。
将特殊性的结果比作四位数值。 如: 0, 0, 0, 0 ,有以下规则。
(1),声明中的每个ID属性值,加 0, 1, 0, 0. 如:
.#answer { color: red } // 特殊性: 0, 1, 0, 0 answer是一个id
(2),每个元素和伪元素, 加 0, 0, 0, 1 如:
h1 { color: red } //特殊性:0, 0, 0, 1 只有一个元素h1 div ul li { color: red } //特殊性:0, 0, 0, 3 三个元素( div, ul, li )
(3),每个类属性值,伪类,或属性选择器, 加 0, 0, 1, 0 如:
h2.grape { color: red } //特殊性:0, 0, 1,1 一个类属性值grape,一个元素h2 input[ type=“text” ] //特殊性:0, 0, 1, 1 一个属性选择器type=“text” 一个元素input
(4),结合符和通配选择器对特殊性贡献为0
* { color: red } 特殊性:0, 0, 0, 0
(5),继承来的属性没有特殊性,还不如0.
(6),內联样式声明的属性特殊性第一个数字为1,比其它外部声明的属性的特殊性都高
(7),带有important的属性特殊性最高.
(8),相同属性的特殊性相同时,匹配后声明的样式
例1:
p { color: red; //特殊性:0, 0, 0, 1 } body p { color: green; //特殊性:0, 0, 0, 2 特殊性较高 }
<p>My color: Red Or Green ?</p>
结果为:
例2:
body h1 { color: black; //特殊性:0, 0, 0, 2 } .test { color: gray; //特殊性:0, 0, 1, 0 } h1.test { color: orange; //特殊性:0, 0, 1, 1 特殊性最高 }
<h1 class="test">My color: Black Or Gray Or Orange ?</h1>
例3
#test { color: red; 特殊性:0, 1, 0, 0 特殊性较高 } table tr td ul li[id="test"] { color: gray; 特殊性:0, 0, 1, 5 }
<table> <tr> <td> <ul> <li id="test">My Color ?</li> </ul> </td> </tr> </table>
例4
#test { color: green; 特殊性: 0, 1, 0, 0 }
<p id="test2" style="color: red">My Color is Red</p> //为内联样式 特殊性高于其它外部样式
相关推荐
一种可视化的方式来分析选择器在CSS中的特殊性
脑图形式的css选择器和层叠规则整理,包括css选择器的类型以及css层叠规则的影响因素(重要性、来源、特殊性、顺序等等),属于前端基础技术的资源
在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 那么,又怎么来计算选择器的特殊性呢?下面...
特殊性可视化工具一种分析CSS中选择器的特殊性的可视化方法:isellsoap.github.io/specificity-visualizer查看介绍特殊性可视化工具的博客文章。 它详细介绍了“为什么”,“为什么……”特异性可视化工具一种用于...
CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下
在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 那么,又怎么来计算选择器的特殊性呢? 下面...
选择器的特殊性由选择器本身的组件确定;特殊性由四个部分组成,其初始值为0,0,0,0。 1. 对于选择器中的每一个id,加0,1,0,0; 2. 对于选择器中的每一个类、伪类、属性选择,加0,0,1,0; 3. 对于选择器中的...
css选择器:标签选择器,类选择器,ID选择器,后代选择器,通用选择器,伪类选择器(给html标签的某种状态设置样式),分组选择器; 样式继承,优先级,最高层级!important; css字体样式:font-family设置字体系列...
1.2.4 层叠和特殊性 1.2.5 继承 1.3 规划、组织和维护样式表 1.3.1 对文档应用样式 1.3.2 对代码进行注释 1.3.3 样式指南 1.3.4 组织样式表以便简化维护 1.4 小结 第2章 可视化格式模型 2.1 框模型概述 ...
CSS 特异性图这个项目的目标是采用提供的 CSS,分析选择器,并生成一个特异性图(基于)。 正因为我们都在同一页面上,我会经常拼错“特殊性”,而且经常不纠正它。 想要演示? 。要求PHP 您想要分析的一些 CSS...
关于ID选择器和class选择器不同,这里使用#class的值不同标签可以发生重复。但是id不允许!!!id选择器不能结合使用id属性通常和js配合使用 CSS Code复制内容到剪贴板 #label { background-color: red; } ...
插件可以增加选择器的特殊性。 处理您无法删除CSS(主要是从第三方),。 安装 npm install postcss-increase-specificity --save-dev 用法 基本范例 var postcss = require ( 'postcss' ) ; var ...
语法:选择器1,选择器2,选择器N{} 例子: div,p,#box,.hello{} 交集选择器 可以选中满足多个条件的元素 语法:选择器1选择器2选择器N{} 例子:p.hello{} 后代元素选择器 选中指定元素的...
2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开...