CSS选取器优先级

f9yx0du

1、CSS有些平常选取器

1、标签选取器（元素选取器）

eg：body,li,div,span等

2、类选取器（页面中class能够有非常多个）

eg：<div class="content"></div>

3、id选取器（页面中id只能有一个）

eg：<div id="content"></div>

4、通配符选择器：一般用*暗示

5、后代选取器

eg：对header元素下的所有的div写样式，即：header div{color:red;}

6、子元素选取器

选取只做为 header 元素下一级的 div 元素，即：header > div {color:red;}

7、伪类选取器

eg：选取器:active，用法：a:active；匹配被点击的链接

2、CSS优先级算法（参照CSS2.1算法，不适于CSS3）

1、算法

倘若声明来自一个style属性而不是一条选取器样式规则，算1，否则便是0 (= a)（HTMl中，一个元素的"style"属性值是样式表规则，这些属性无选取器，因此a=1，b=0，c=0，d=0）计算选取器中ID属性的数量 (= b)计算选取器中其它属性和伪类的数量 (= c)计算选取器中元素名和伪元素的数量 (= d)总结：从左到右进行比较，大的优先级越高。

2、示例

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#name {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

3、总结

1、选取器越详细，其优先级越高

2、相同优先级，显现再后面的，覆盖前面的

3、属性后面加!important优先级最高，然则要少用

m5k1umn

楼主节操掉了，还不快捡起来！

wrjc1hod

感谢您的精彩评论，为我带来了新的思考角度。

wrjc1hod

楼主节操掉了，还不快捡起来！