优先级的计算规则

  1. 内联 > 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 的值等于 标签选择器 和 伪元素 出现的总次数 。

例子：

  1. #nav-global > ul > li > a.nav-link

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

比较规则

从左往右 依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的。

  1. #nav-list .item {
  2.     color: #f00;
  3. }
  5. .nav-list .item {
  6.     color: #0f0;
  7. }

算出 #nav-list .item 的优先级是 (0, 1, 1, 0), .nav-list .item 的优先级是 (0, 0, 2, 0)。 左边第一位都是0， 再看看左边第二位，前者是1，后者是0， 所以（0, 1, 1, 0） 的大于 (0, 0, 2, 0) ，即 #nva-list .item 大于 .nav-list .item，所以字体会是红色。

优先级的特殊情况

注意：优先级只会比较相同属性

!important 

  1. <div class="box" style="background: #f00; width: 300px!important;">我的宽度是多少呢？？<div>
  3. .box {
  4.     max-width: 100px;
  5. }

此时 .box 宽度只有100px . max-width 可以超越 width!important