浅谈CSS优先级的计算方法

1、CSS优先级包含四个级别：

①　标签内选择器

②　id选择器

③　class选择器

④　标签选择器

 

2、计算四个级别选择器出现的次数（用四位表示）：

①    标签内选择器定义的样式（Style属性）：第1位加1

②    id选择器：第2位加1

③    class选择器、属性选择器、伪类选择器：第3位加1

④    标签选择器、伪元素选择器：第4位加1

 

3、从左到右逐位比较大小，数值越大的CSS样式的优先级越高。

4、原则：

①　!important声明的样式优先级最高。

②　就近原则：如果优先级相同，则最后定义的样式会起作用，但应避免这种情况出现。

③　同权重情况下，内联样式表> 嵌入样式表> 外部样式表。

④　继承的样式的优先级低于指定的样式的优先级。

5、选择器的优先级：

①　在属性后面使用!important会覆盖页面中任何位置定义的元素样式

②　作为style属性写在元素内的样式

③　id选择器

④　类选择器

⑤　伪类选择器

⑥　标签选择器

⑦　通配符选择器