一、 CSS选择器分类

CSS选择器如下：

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

用法如下：

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

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

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

完整CSS选择器参考手册

详细的选择器类型

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

类型选择器（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）对页面性能的改善更值得关注。

完整CSS选择器优先级

CSS选择器及其优先级排序相关推荐

详解CSS选择器、优先级与匹配原理
选择器种类严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的 ...
CSS选择器的优先级的相关介绍
css选择器的优先级使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示优先级规则(权重值 ...
【CSS笔记】CSS选择器的优先级（权重）
目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...
CSS选择器的优先级是怎样的？
CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器到具体的计算层面,优先级是由 A .B.C.D 的值来决定的,其中它们的值计算规则如下: A 的值等于 1 ...
css选择器的优先级，以及用法
目录前言一.css选择器二.css选择器优先级排序三.css选择器的总结 1. !important 2.内联选择器 3.id选择器 4.类别选择器 5.属性选择器(内容较多) 6.伪类选择 ...
CSS选择器及优先级总结
一.优先级不同级别在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器类选择器元素选择器通配符选择器浏览器自定义或继承 ...
css选择器的优先级
1. 引言选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到 ...
[转]《精通css》笔记1：css选择器与优先级
本文转自:http://www.cnblogs.com/webmoon/archive/2012/12/02/2798183.html css选择器一.基础选择器 css基础选择器有标签选择器.类选 ...
css选择器的优先级和权重问题
CSS选择器的种类: 1.id选择器如:(id="name",id="name_txt)(*name) 2.class选择器(如:class="head&quo ...

CSS选择器及其优先级排序