137-css-16-图文~选择器优先级
选择器优先级
内联 > ID选择器 > 类选择器 > 标签选择器。
计算规则
第一优先级：!important会覆盖页面内任何位置的元素样式
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
如果存在内联样式(style="color: green")，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器(#app) 出现的次数;
C 的值等于 类选择器(.foo) 和 属性选择器(div[class="foo"]) 和 伪类(:first-child) 出现的总次数;
D 的值等于 标签选择器(div) 和 伪元素(::before ::after) 出现的总次数 。
#nav-global > ul > li > a.nav-link
因为没有内联样式 ，所以 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) */
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) */
比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的
参考