CSS选择器的优先级

标签：样式   计算公式   :link   主题   现在   大众   了解   选择器   type   

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" name="div1">我是一个div
10         a href="#" name="a1">链接a>
11     div>
12     a href="#" name="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加载优先级的问题了，有问题可以发邮件，earealyi2020@163.com

CSS选择器的优先级

标签：样式   计算公式   :link   主题   现在   大众   了解   选择器   type   

原文地址：https://www.cnblogs.com/ezrealyi/p/12397268.html