CSS之优先级（6⼤类）、权重（4等级）、从⾼到低优先顺序⽬录
⼀、css优先级的 6⼤分类
通常可以将css的优先级由⾼到低分为6组：
第⼀优先级：⽆条件优先的属性只需要在属性后⾯使⽤！important。它会覆盖页⾯内任何位置定义的元素样式。ie6不⽀持该属性。
第⼆优先级：在html中给元素标签加style，即内联样式。该⽅法会造成css难以管理，所以不推荐使⽤。
第三优先级：由⼀个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由⼀个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由⼀个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}
⼆、css优先级的优先顺序
⾏内样式（）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通⽤选择器(*{…})
三、选择器的权重及优先规则
在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于⼀般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。
那么如何计算选择器的特殊性呢？那就要⽤到选择器的权重计算了。计算规则如下图：
四、权重的 4个等级定义
我们把特殊性分为4个等级，每⼀个等级代表⼀类选择器，没个等级的值相加得出选择器的权重。
4个等级的定义如下：
第⼀等级：代表内联样式，如，权值为 1000
第⼆等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1css 属性选择器
注意：通⽤选择器（*），⼦选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0
五、权重的优先顺序
⾏内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通⽤选择器（0）
六、利⽤权重值⽐较优先级
1. 权重值越⼤，优先级越⾼
2. 选择器选择的范围越⼩越精确，优先级越⾼
eg：
#box p .tt =100+1+10
#box .tt =100+10

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。