css优先级_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:12:48
Original
1040 Leute haben es durchsucht

CSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式, specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。选择符Specificity值列表:  

规则:  

1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。

2.!important声明的Specificity值最高;

3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;

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

 

!important 的优先级最高 使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外在同级样式按照申明的顺序后出现的样式具有高优先级。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage