前端面试题系统

转自CSS之优先级（6大类）、权重（4等级）、从高到低优先顺序_css样式优先级高低排列_打瞌睡的兔兔小姐的博客-优快云博客

CSS的优先级及其计算公式：

一、CSS优先级分级：

1. ！important：使用方法：在属性后面加上!important。优先级最高，会覆盖页面内任意位置定义的元素样式。IE6支持该属性。

2. 内联样式：使用方法：在html中给元素标签加style。

3.ID选择器：使用方法：利用ID选择器来定义的。例如：#id{magrin:0;}，会覆盖覆盖.classname{}

4.类/伪/属性选择器：如.classname{}

5.标签选择器：div、p等标签

6.通用选择器：{}

二、css优先级的顺序

!important > 内联样式（style="..."） > ID 选择器（#name{...}） > 类/伪/属性选择器(.classnem{...}) > 标签选择器（div{...}）> 通用选择器

三、选择器的权重及其规则

在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

四、CSS中的权重定义

注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

五、利用权重值比较优先级

1、权重越大，优先级越高

2、选择器选择范围越小，越精准，优先级越高。

如：

#center p .tt = 100+1+10 
#center .tt = 100+10 

#center 为id选择器 ;p为标签选择器；.tt为类选择器