CSS选择器优先级与效率优化

Date: 7th of Aug, 2015

Author: HaoyCn

本文收集网上各处关于CSS选择器的文章总结，并自己归纳一篇。

各类选择器的优先级

important声明 1,0,0,0
ID选择器 0,1,0,0
类选择器 0,0,1,0
伪类选择器 0,0,1,0
属性选择器 0,0,1,0
标签选择器 0,0,0,1
伪元素选择器 0,0,0,1
通配符选择器 0,0,0,0

在上面的选择器中，此外，经测试

属性选择器 = 伪类选择器(应用最后一个)

:last-child{color:red;}
[desc]{color:green;}

伪类选择器 > 相邻选择器

:last-child{color:green;}
p ~ p{color:blue;}

相邻选择器 = 子选择器 = 后代选择器(应用最后一个)

p~p{color:red;}
body p{color:blue;}
body > p{color:green;}

后代选择器 > 标签选择器

p ~ p{color:blue;}
p{color:green;}

样式位置的影响

<style></style> 同 <link /> 同级，应用取决于<style>标签和<link /> 标签的先后顺序
元素style=""属性的优先级高于以上两种样式
!important 优先级高于以上两种样式

备注

!important 在IE6中的BUG：在同一组CSS属性中, !important不起作用。如：

#selector{color:blue !important;color:green;}

选择器效率

读取选择器的原则是从右到左。因此，我们书写的右边的最后一个选择器，被称作关键选择器，对于效率有决定性影响。

以下效率排行由 @Steve Souders 提供。

ID选择器
类选择器
标签选择器
相邻选择器
子选择器
后代选择器
通配符选择器
属性选择器
伪类选择器

优先级高的不一定效率高

举个例子：#id .class 与 div#id p.class

前者效率高于后者，而后者优先级高于前者。我们需要在效率与优先级之间平衡取舍。

优化建议

以下网址提供了诸多建议：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficie...

扼要摘其精要总结如下：

避免使用通配符
不使用标签名或类名修饰ID规则：如果规则使用ID选择器作为关键选择器，不要给规则添加标签名。因为ID本身就是唯一的，添加标签名会不必要地降低匹配效率。
不使用标签名修饰类：相较于标签，类更具独特性。
尽量选择最具体的方式：造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式，可以减少规则去匹配标签的时间。
关于后代选择器和子选择器：避免使用后代选择器，非要用的话建议用子选择器代替，但子选择器也要慎用，标签规则永远不要包含子选择器。
利用可继承性：没必要在一般内容上声明样式。

CSS 选择器优先级与效率优化相关推荐

谁动了我的选择器？深入理解CSS选择器优先级
深入理解CSS选择器优先级
css选择器优先级和photoshop快捷键以及100度享乐网框架
css选择器优先级 CSS选择器的优先级:作用的元素一样,样式一样,就会有优先级问题,当优先级相同时,一旦发生重叠,以样式后面为主 CSS选择器:统配选择器,类选择器,标签选择器,id选择器,后代选择 ...
html5选择器优先级,css选择器优先级怎么比较
css选择器优先级怎么比较 CSS选择器中比较常见的有标签选择器.ID选择器.类选择器以及子选择器.而事实上,CSS选择器如果细分下来,竟然多达40多种.那他们的优先级该怎么比较呢,下面就来看看吧. ...
css选择器优先级深入理解
css基础选择器有标签选择器.类选择器.id选择器.通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助一.基础选择器 css基础选择器有标签选择器.类选择器 ...
css选择器优先级顺序是什么？css基本选择器优先级的介绍
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 打造全网we ...
css选择器优先级问题
css选择器优先级问题(选择器的权重图) A.为啥有此问题的产生? a.众所周知,css对于同一属性先进行优先级别的判断,若比之前渲染的优先级别高,那么就会渲染成这个优先级别较高的. b.对于单一的选 ...
css选择器优先级及,CSS选择器优先级（转）
1. 引言上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一 ...
CSS选择器优先级详解
1. 优先级分级按照优先级从高到低排列: 1. ! important .foo{color:red !important } !important是顶级优先级,唯一推荐使用它的场景为忽略JS脚本设 ...
html5css选择器优先级,CSS选择器优先级[重要]
CSS选择器优先级浏览器是通过判断CSS优先级,来决定到底哪些属性值是与元素最为相关的,从而作用到该元素上.CSS选择器的合理组成规则决定了优先级,我们也常常用选择器优先级来合理控制元素达到我们理想 ...

CSS 选择器优先级与效率优化