CSS选择器优先级如何确定

• 如果声明来自一个'style'属性而不是一条选择器样式规则，算1，否则就是0 (= a)
• 计算选择器中ID属性的数量 (= b)
• 计算选择器中其它属性和伪类的数量 (= c)
• 计算选择器中元素名和伪元素的数量 (= d) 一些示例

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

1. 选择器越具体，其优先级越高

2. 相同优先级，出现在后面的，覆盖前面的

3. 属性后面加 !important 的优先级最高，但是要少用