CSS的优先级

css优先级规则 CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。 CSS 优先规则2："直接样式"比"祖先样式"优先级高。 CSS 优先规则3： 优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 CSS 优先规则4： 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。 规则四，我们可以这样想： 首先，CSS的优先级是根据样式声明的特殊性值来判断的。 根据规则三可以把特殊性分为四个等级：如下：

标签内选择符x,0,0,0 ID选择符0,x,0,0 class选择符/属性选择符/伪类选择符 0,0,x,0 元素标签和伪元素选择符0,0,0,x 每个选择器初始值都为0 0 0 0 ，根据规则四，进行相应的加1，判断优先级时，从左向右判断，若两个优先级相等，则后出现的优先级大。 出现!important的权重最大。可以认为是1 0 0 0 0 eg： 这个优先级为 0 1 0 1

**判断选择器优先级时，先判断样式声明后面是否由 !important，有的话，权重最大； 说明： 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然技术上 !important 与优先级无关，但 !important 却又与 CSS 优先级直接相关。 破坏级联规则 使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

然后，判断优先级时，多个选择器综合权重来判断优先级：我们可以把选择器的优先级分为四个等级， 第一个等级：行内样式，为1000 第二个等级：id选择器，为0100 第三个等级：类选择器、伪类选择器、属性选择器，为0100 第四个等级：标签选择器和伪元素选择器，为0001 分割符============================================= 规则中出现的每一个选择器，会根据他们的特殊性进行叠加。判断优先级时，从左向右判断，数字大的优先级大。**