CSS选择器的优先级

1.首先介绍一下CSS内联

　　内联css也叫做行级css或行内css，它是直接在标签内使用

1 <body>
2     <span style="color: red;">我是span块</span>
3 </body>

2.各种选择器

标签选择器：点击 这里 了解标签选择器

ID选择器：点击 这里 了解ID选择器

类选择器：点击 这里 了解类选择器

属性选择器：点击 这里 了解属性选择器

伪类：点击 这里 了解伪类

伪元素：点击 这里 了解伪元素

3.进入主题，了解选择器优先级计算公式

每位写过各种选择器的学习者来说，都总结过一个大众的规律：

内联>ID选择器>类选择器>标签选择器

其实关于优先级有一个计算公式，在《CSS REFACTORING》一书中提过

A specificity is determined by plugging numbers into (a, b, c, d):

  1. If the styles are applied via the style attribute, a=1; otherwise, a=0.
  2. b is equal to the number of ID selectors present.
  3. c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
  4. d is equal to the number of type selectors and pseudoelements present.

什么意思呢？我给大家解读一下

优先级是通过将数字插入（a，b，c，d）中来确定的：

  1. 如果内联样式属性应用样式，则a = 1; 否则，a = 0。
  2. b等于存在的ID选择器的数量。
  3. c等于存在的类选择器，属性选择器和伪类的数量。
  4. d等于存在的标签选择器和伪元素的数量。

（现在知道上面科普各类选择器的意义了吧0.0），说了这么多还是有人看不明白，直接上个例子吧

 1 <style>
 2 #div1 .a1 {color: red;}
 3 #div1 .a1:link {color: blue;}
 4 .div1 .a1 {color: yellow;}
 5 .a2 {color: red;}
 6 </style>
 7 
 8 <body>
 9     <div id="div1" class="div1">我是一个div
10         <a href="#" class="a1">链接</a>
11     </div>
12     <a href="#" class="a2">链接</a>
13 </body>
#div1 .a1对应的（a,b,c,d）a=0,b=1,c=1+0+0=1,d=0,故（0,1,1,0）
#div1 .a1:link对应的（a,b,c,d）=（0,1,2,0），所以比#div1 .a1优先级高
同理 .div1 .a1=（0,0,2,0）,所以比#div1 .a1优先级低


现在大家一目了然，应该不会有css加载优先级的问题了，有问题可以发邮件，ezrealyi2020@163.com
posted @ 2020-03-02 18:28  EzrealYi  阅读(137)  评论(0)  编辑  收藏  举报