一、 CSS选择器分类
CSS选择器如下：
CSS的选择器其实大类的话可以分为三类，即id选择器、class选择器、标签选择器。
用法如下：
其中，他们之间又可以以不同的方式进行组合，如下：
- 后代选择器: 父代名 后代名 { 属性名:属性值; }
- 子代选择器:父代名>子代名 { 属性名:属性值; }
- 群组选择器: #name1, .name2, #name div { 属性名:属性值; }
- 伪类选择器: name:伪类
- 通用(通配符)选择器:* { 属性名: 属性值; } ……
常用的也就这些。
详细的选择器类型
下面列表中，选择器类型的优先级是递增的：
- 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）
- 类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type=“radio”]），伪类（pseudo-classes）（例如, :hover）
- 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
取而代之，你可以：
- 更好地利用CSS级联属性
- 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级
二、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的执行效率：
- 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
- 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。