CSS选择器及其优先级排序

一、 CSS选择器分类

---

CSS选择器如下：

CSS的选择器其实大类的话可以分为三类，即id选择器、class选择器、标签选择器。

用法如下：

• id选择器： #id名 { 属性名:属性值; }
• class选择器 ：.class名 { 属性名:属性值; }
• 标签选择器： 标签名 { 属性名:属性值; }

---

其中，他们之间又可以以不同的方式进行组合，如下：

• 后代选择器: 父代名 后代名 { 属性名:属性值; }
• 子代选择器:父代名>子代名 { 属性名:属性值; }
• 群组选择器: #name1, .name2, #name div { 属性名:属性值; }
• 伪类选择器: name:伪类
• 通用(通配符)选择器:* { 属性名: 属性值; } ……
  常用的也就这些。

完整CSS选择器参考手册

详细的选择器类型

下面列表中，选择器类型的优先级是递增的：

1. 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）
2. 类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type=“radio”]），伪类（pseudo-classes）（例如, :hover）
3. ID选择器（例如, #example）

通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, ’ ') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

给元素添加的内联样式 (例如, style=“font-weight:bold”) 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。.

例外的 !important 规则

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

一些经验法则：

• 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
• 只有在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• 永远不要在全站范围的 css 上使用 !important
• 永远不要在你的插件中使用 !important

取而代之，你可以：

1. 更好地利用CSS级联属性
2. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级

---

二、CSS选择器优先级

优先级就是分配给指定的CSS声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

• 最高优先级是 (直接在标签中的设置样式，假设级别为1000)
• 次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}
• 其次优先级是（类选择器，假设级别为10）.divClass{color:Red;}
• 最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
• 那么后代选择器的优先级就可以计算了啊

选择器优先级通俗的理解

优先级：由高到低(从上到下)

• !important

• 内联(1,0,0,0)

• id: (0,1,0,0)

• 类：(0,0,1,0)

• 伪类/属性

• 元素：(0,0,0,1)

• 通配符

• 继承

---

使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。

比如

.divClass span { color:Red;} 优先级别就是：10+1=11

---

从上面我们可以得出两个关键的因素：

• 权值的大小跟选择器的类型和数量有关
• 样式的优先级跟样式的定义顺序有关

关于CSS的执行效率：

1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
2. 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

---

完整CSS选择器优先级