CSS选择器及属性优先级代码
熟悉CSS选择器的优先级可以适当的减少CSS的开发时间，同时也能减少CSS的代码量。下面来讲讲我个人对CSS选择器优先级的认识。
常用的CSS选择器有以下5种：
一、标签名选择器，如：
div{}
二、类选择器，如：
.test{}
三、ID选择器，如：
#test{}
四、后代选择器，如：
.wrap div{}
.wrap .test{}
五、群组选择器，如：
div,p,li,span{}
.wrap p, .wrap .test{}
仔细看会发现，其实“后代选择器”和“群组选择器”其实就是上面三种的组合。
上面前三种选择器的优先级的关系： ID选择器 > 类选择器 > 标签名选择器
当然，在我们正常的使用过程中并非这么简单。看下面一组代码：
HTML：
<div class="cc">
<div class="bb" id="ss">
<p class="aa">CSS选择器优先级</p>
</div>
</div>
CSS：
/*第一小组*/
.aa{color:blue;}
.bb .aa{color:red;}
/*第二小组*/
.cc .bb{color:blue;}
.cc .aa{color:red;}
/*第三小组*/
#ss{color:blue;}
#ss .aa{color:red;}
.cc .bb .aa{color:green;}
/*第四小组*/
.aa{color:blue;}
p.aa{color:red;}
/*第五小组*/
.bb .aa{color:blue;}
.bb p.aa{color:green;}
div.bb .aa{color:orange;}
div.bb p.aa{color:red;}
第一组的优先级： .bb .aa > .aa
第二组的优先级： .cc .aa > .cc .bb
第三组的优先级： #ss .aa > #ss > .cc .bb .aa
第四组的优先级： p.aa > .aa
第五组的优先级： div.bb p.aa > .bb p.aa = div.bb .aa > .bb .aa （暂不考虑在CSS中的顺序，以下也是）
四组综合起来的优先级（从上到下按高到低的顺序）：
#ss .aa
#ss
.cc .bb .aa
div.bb p.aa
div.bb .aa = .bb p.aa
.bb .aa = .cc .aa
.cc .bb
p.aa
.aa
从上面的优先级关系，我个人得出这样一个规律（不考虑 .cc #ss这种情况）：
①ID选择器的优先级高于 类选择器和标签名选择器；（见第三组）
②选择器中含有相同的ID（不考虑 .cc #ss），选择器层级越长优先级越高；（见第三组）
③选择器中，全部是类的情况下，选择器层级越长优先级越高；（见第一组）
④选择器中，层级长度相等，含有标签名选择器的优先级高于不含有标签名的选择器；含有的标签名选择器多的高于少的；含有的标签名选择器数量相同优先级相等此时需要看在CSS中的顺序，后面的大于前面的；（见第五组）
⑤选择器中，层级长度相等，且标签名选择器数量相等，最后一个类越接近目标标签则优先级越高（见第二组）；如果最后一个类相同则优先级相等（见第五组）；
下面我们来看一下属性的优先级（不知道这样讲合不合适），在讲之前我们先来了解一下 !important 。可能在大家最早接触 !important 是在用CSS的hack方法，其实我个人认为 !important 并非是用在hack方法里面，因为所有浏览器都能识别!important ， 那 !important 到底是一个什么样的东西？来看看下面的例子：
<style>
#aa{color:blue;}
.bb{color:red!important;}
</style>
<div style="color:green;" class="bb">!important是个不错的东西哦，知道我显示的是什么颜色吗？</div>
当你测试的上面这段代码你会发现里面的文字显示的是红色，不是绿色，更不是蓝色。我想此时你已经猜到了!important的作用了。!important的优先级是最高的，比行内样式的优先级还要高。你也可以尝试将 !important 去掉 ...
从上面的那段代码中，我们可以得出这样一个结论：
使用 !important 的优先级最高，其次就是行内样式，最后就是之前讲到的选择器优先级顺序。
原文地址：http://www.35ui.cn/post/css.html 标签：CSS选择器
上一条： jQuery图片延迟加载插件属性代码
下一条： jquery焦点函数input选中样式切换
