在css中,权重相当于优先级,优先级高的css样式会覆盖优先级低的样式,优先级越高也代表着权重越高。当css选择规则的权重不同时,权值高的优先。当css选择规则的权值相同时,后定义的规则优先。
一、css优先级的6大分类
通常可以将css的优先级由高到低分为6组:
第一优先级:属性后面使用!important。它会覆盖页面内其他位置定义的元素样式。
第二优先级:在html中给元素标签加style,即内联样式/行内样式。(style="…")
第三优先级:由一个或多个id选择器来定义。 (#box{…})
第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义。 (.classname{…})
第五优先级:由一个或多个类型选择器定义。 (div{…})
第六优先级:通配选择器。 (*{…})
二、权重的4个等级定义
我们把特殊性分为4个等级,每一个等级代表一类选择器,每个等级的值相加得出选择器的权重。
4个等级的定义如下:
第一等级:代表内联样式,如style="…",权值为 1000
第二等级:代表id选择器,如#box{…},权值为100
第三等级:代表类,伪类和属性选择器,如.classname{…},权值为10
第四等级:代表标签选择器和伪元素选择器,如div{…},权值为1
注意:1、!important 的权重是无穷大,无条件优先。
2、继承 与 通配选择器的权重是0。
三、优先顺序
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器