CSS优先选择级优化算法怎样测算?有哪些判断要

日期:2020-12-12 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

有关CSS specificity

CSS 的specificity 特点或称不凡性,它是1个考量CSS值优先选择级的1个规范,既然做为规范,就具备1套有关的判断要求及测算方法,specificity用1个4位的数 字串(CSS2是3位)来表明,更像4个级別,值从左到右,左边的最大,1级超过1级,多位之间沒有进制,级別之间不能跨越。
在好几个挑选符运用于同1个元素上那末Specificity值高的最后得到优先选择级。

挑选符Specificity值目录:

标准:

1. 行内款式优先选择级Specificity值为1,0,0,0,高于外界界定。
如:<div style=”color: red”>sjweb</div>
外界界定指经过<link>或<style>标识界定的标准;
2.!important申明的Specificity值最高;
3.Specificity值1样的状况下,按CSS编码中出現的次序决策,后者CSS款式居上;
4.由再次而获得的款式沒有specificity的测算,它低于1切别的标准(例如全局性挑选符*界定的标准)。

优化算法:

当遇到好几个挑选符另外出現情况下
按挑选符获得的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

!important 的优先选择级最高