一般大家都知道的css优先级排列顺序!important > style > id > class，但是，浏览对于CSS的优先级算法具体是什么样的呢？ 。《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的值等于标签选择器和伪元素出现的总次数 。
例如：
#nav-global > ul > li > a.nav-link
套用上面的算法，依次求出 A B C D 的值：
- 因为没有内联样式 ，所以
A = 0; - ID选择器总共出现了1次，
B = 1; - 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以
C = (1 + 0 + 0) = 1； - 标签选择器出现了3次， 伪元素出现了0次，所以
D = (3 + 0) = 3;
上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)。
为了熟悉掌握优先级算法 ，我们再来做一些练习：
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
OK， 现在已经弄清楚了优先级是怎么算的了。但是，还有一个问题，怎么比较两个优先级的高低呢？ 比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的
