每天一道题【简单快速理解】：CSS选择器的优先级别是什么样的？

❝

作者：bibi不吃鱼 今日的许多烦恼，都来源于昨日的惰性。

❞

简单理解

CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器

如何计算优先级？

既然简单理解里面给大家的优先级别排序了，那么我们将每个选择器的重要程度也依次划分为A（内联）,B（ID选择器）,C（类选择器）,D（标签选择器，伪元素）。

然后我们开始计算分数。

如果出现一次内联样式，就给A加一分，否则A=0。 B的分数等于ID选择器出现的次数。 C的分数等于类选择器和属性选择器和伪类出现的总次数。 D的分数等于标签选择器和伟元素出现的总次数。

举例理解：

ul ol li .red{
  ...
}

我们来计算一下上面的选择器的分数：不存在内联样式，A=0。 不存在id选择器，B=0，存在一个类选择器C=1。存在三个标签选择器D=3。好了我们归并一下得分：{0,0,1,3}。

我们再来看下面这个选择器的分数。

  #red {
  
  }

只有一个ID选择器，所以B得一分。归并分数{0,1,0,0}。

这里其实和数字位数一样，越搞前的权重越大。我们可以理解为第二个选择器有100分，第一个选择器有13分。B位置上1>0,所以第二个选择器的优先级更高。

如果对你有帮助的话，请点个👍吧！我们继续分享更多文章的～

本文使用 mdnice 排版