CSS优先级算法是如何计算？

CSS的specificity特性或非凡性，它是一个衡量css优先级的一个标准，

既然的标准就有判定规定和计算方式，specificity用一个四位数来表示，

更像四级从左到右，左的最大级，一级大于一级，数位之间没有进制，

多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级。

css specificity

规则

1、行内样式优先级specificity值为1,0,0,0 高于外部定义

　　如<div style="height:50px; width:50px;">Div</div> //行内样式

　　外部定义指经由<link>或<style>标签定义的规则

2、按CSS代码中出现的顺序决定，后者CSS样式居上；（近水楼台先得月）

3、!important声明specificity值优先级最高

4、由继续而得到的样式没有specificity的计算，它低于一切其他规则（比如全局选择符*定义规则）

算法：

当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加，
{数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity，
然后在比较取舍时按照从左到右的顺序逐位比较。

实例分析：

1.div { font-size:12px;}
分析：
1个元素{ div}，Specificity值为0,0,0,1

2.body div p{color: green;}
分析：
3个元素{ body div p }，Specificity值为0,0,0,3

3.div .sjweb{ font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,0,1, 0
最终：Specificity值为 0,0,1,1

4.Div # sjweb { font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,1,0, 0
最终：Specificity值为 0,1,0,1

5.html > body div [id=”totals”] ul li > p {color:red;}
分析：
6个元素{ html body div ul li p} Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0
2个其他选择符{ > > } Specificity值为0,0,0,0
最终：Specificity值为 0,0,1,6

转载于:https://www.cnblogs.com/love-sea520/p/5903196.html

CSS优先级算法是如何计算？相关推荐

CSS优先级算法浅谈
转自:微点阅读 https://www.weidianyuedu.com 在面试之前对css优先级的理解是 :ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先 ...
CSS 优先级算法如何计算？
相关知识点: CSS的优先级是根据样式声明的特殊性值来判断的. 选择器的特殊性值分为四个等级,如下: (1)标签内选择符x,0,0,0 (2)ID选择符0,x,0,0 (3)class选择符/属性选择 ...
CSS优先级算法如何计算
判断优先级时,首先我们会判断一条属性声明是否有权重,也就是是否在声明后面加上了!important.一条声明如果加上权重,那么他的优先级就是最高的,前提是它之后不再出现相同权重的声明.如果权重相同,我 ...
CSS语法和CSS优先级
语法层叠样式表( Cascading Stylesheet ,简称CSS ), 其基本目标是让浏览器以指定的特性去绘制页面元素,比如颜色,定位,装饰.CSS的语法反映了这个目标,由下面两个部分构建: ...
CSS三大特性（CSS层叠性、CSS继承性、CSS优先级）
1. CSS层叠性层叠性是指多种CSS样式的叠加. 原则: 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠示例代码: <!DOCTYPE htm ...
css就近原则_「Web前端开发进阶篇」CSS优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个"规则"就是重点. [引言] 讲解完这篇CSS优先级的文章 ...
day4(css优先级)
参考博客: http://www.cnblogs.com/yuanchenqi/articles/6856399.html css属性选择器 <!DOCTYPE html> <htm ...
css优先级计算规则
2019独角兽企业重金招聘Python工程师标准>>> 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于 ...
详细解读CSS优先级——Web前端系列学习笔记
文章目录样式优先级选择器的优先级总结样式优先级 CSS优先级即是指CSS样式在浏览器中被解析的权重不同. 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于 ...

CSS优先级算法是如何计算？

CSS优先级算法是如何计算？相关推荐

最新文章

热门文章