CSS选择器&选择器的优先级计算

CSS 指层叠样式表 (Cascading Style Sheets) ， 定义如何显示 HTML 元素 ，从而影响页面的样式及布局。
CSS的主要内容是选择器，这里所说的选择器实际上是一个统称，是很多基本概念的集合。

CSS选择器的一些基本概念

CSS选择器可以分为4类：

1. 选择器
   指的是CSS声明块前面的标签、类名等。比如：

   body{font-size: 12px;}
   
   .btn{display:inline-block;}
   

   body是标签选择器,.btn是类选择器，此外还有属性选择器、ID选择器、伪类选择器等。

2. 选择符
   表示选择器关系的符号。

   • 空格：表示后代关系 div .btn{display:inline-block;}；
   • >: 表示父子关系 div>p{color:red;}；
   • 加号+: 表示相邻兄弟关系；
   • ~：表示兄弟关系；
   • 双管道||：表示列关系

3. 伪类
   伪类的特征是其前面会有一个冒号:，通常与浏览器行为及用户行为有关，可以看做是CSS世界的JavaScript。比如：

   input:focus{border-color:blue;}
   
   .btn:hover{color:#fff;}
   
   .btn:active{background:darkblue;}
   

4. 伪元素
   伪元素的特征是其前面会有两个冒号::，常见的伪元素有::before，::after，::first-letter，::first-line等。

选择器的优先级

根据CSS选择器的类型、书写形式及语法，将CSS的优先级划分为6个等级，等级越高，优先级越高。

• 0级：通配选择器、选择器和逻辑组合伪类。

  *{color:#333;} // 通配选择器
  // 选择符：+、>、~、空格、||
  // :not(),is(),:where等，这些伪类本身不影响CSS优先级，影响优先级的是括号里的选择器
  

• 1级：标签选择器

• 2级：类选择器、属性选择器、伪类，比如：

  .foo{color:#666;}
  [alt="png"]{width:60px;}
  :hover{color:#fff;}
  

• 3级：ID选择器

• 4级：style属性内联
  优先级

• 5级：!important。

  .imp{color:#999; !important;}
  

  !important是顶级优先级，能重置JavaScript设置的样式，推荐场景是JavaScript设置无效。

CSS选择器优先级的计算

对于CSS选择器优先级的计算，业内比较认可的是数值计数法，每一段CSS语句的选择器都可以对应一个具体的数值，数值越大，优先级越高。
计算规则：每出现一个0级选择器+0，1级选择器+1，2级选择器+10，3级选择器+100

选择器	计数值	计算规则
* {}	0	1个0级通配符选择器，优先级为0
div{}	1	1个1级标签选择器，优先级为1
.btn	10	1个2级类名选择器，优先级为10
div.btn{}	11	1个1级标签选择器、1个2级类名选择器，优先级为11
ul>li{}	2	2个1级标签选择器、1个0级选择符，优先级为2
li>ol+ol	3	3个1级标签选择器、2个0级选择符，优先级为3
a:not([rel=nofollow]) {}	11	1个1级标签选择器、1个2级属性选择器，优先级为11
div#app{}	101	1个1级标签选择器、1个3级ID选择器，优先级为101
#app1 div.btn {}	111	1个3级ID选择器、1个1级标签选择器、1个2级类名选择器、1个0级选择符，优先级为111

提高CSS选择器优先级的技巧：重复选择器自身.btn.btn.btn{display:inline-block;}

注意：10个连续的1级标签选择器的优先级与1个类名选择器并不对等，不同等级的选择器之间的差异是无法逾越的，实际开发中我们不会连续写10个选择器的，因此不影响我们在实际开发中计算选择器的优先级。