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):
- If the styles are applied via the style attribute, a=1; otherwise, a=0.
- b is equal to the number of ID selectors present.
- c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
- d is equal to the number of type selectors and pseudoelements present.
什么意思呢？我给大家解读一下
优先级是通过将数字插入（a，b，c，d）中来确定的：
- 如果内联样式属性应用样式，则a = 1; 否则，a = 0。
- b等于存在的ID选择器的数量。
- c等于存在的类选择器，属性选择器和伪类的数量。
- 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