2015 是前端技术爆发的一年。React Native、Angular 2.0、HTTP 2.0、ES6、Redux、PostCSS 等等，“都是面向用户的程序”——前后端的生态融合成为技术发展的趋势。

2015，也是 SegmentFault 社区内容由量变引起质变的开始。大量专栏作者和问答作者出现，为各自领域的同行贡献了诸多优秀的内容。前端相关的讨论交流很多（实际上非常多），后端、服务端和移动端的内容，也是 2015 年网站内容的主要贡献者。

现在，我们把《SegmentFault 2015 年度精选》推荐给大家，或许你的内容就在其中。

2015 Top Writer

这是一群非常卓越的开发者，有些是全栈工程师，有些精通某一开发领域，有些擅长发技术文章解决方案，有些热衷解答疑惑帮助入门。Top Writer 不光为社区做了巨大贡献，也为更多开发者搭起向上攀登的阶梯。

从 2015 年年中开始，SegmentFault 社区每个季度都会从问答、文章领域各评选出 10~15 位优秀作者，作为当季的 Top Writer，并送上专门设计的 Top Writer T 恤、鼠标垫、贴纸及徽章，来感谢他们在社区的贡献。

2015 Top Writer - 问答

2015 Top Writer - 文章

2015 年度文章精选

除了筛选出 Top Writer，我们还从 2015 年 9000 多篇文章中，整理出了几乎所有主流领域的优秀文章。包括年度浏览指数最高的优质文章，和涵盖 PHP、Java、Python、JavaScript、前端、iOS、Android、React.js、Angular.js、Node.js、Linux、C/C++、服务端、Docker、Ruby 甚至 Git 等大部分技术领域的优秀文章。

所有年度优秀文章已整理为收藏夹：

• SegmentFault 2015 优质文章

• 2015 优秀文章 - PHP

• 2015 优秀文章 - Java

• 2015 优秀文章 - Python

• 2015 优秀文章 - JavaScript

• 2015 优秀文章 - 前端

• 2015 优秀文章 - Android

• 2015 优秀文章 - iOS

• 2015 优秀文章 - React.js

• 2015 优秀文章 - Node.js

• 2015 优秀文章 - Angular.js

• 2015 优秀文章 - Linux

• 2015 优秀文章 - C/C++

• 2015 优秀文章 - 服务端

• 2015 优秀文章 - Docker

• 2015 优秀文章 - Ruby

• 2015 优秀文章 - Git

• 2015 优秀文章 - HTTP

• SegmentFault 2015 优质收藏夹

另附优秀专栏：

• 《Scholer 的 PHP 之路》 - PHP

• 《JohnLui 的专栏》 - PHP / iOS

• 《Coffee, Coke and Code》 - Python

• 《young》 - Python

• 《码农咖啡馆》 - Python

• 《江米条》 - Java

• 《new JinhaoPlus()》 - Java

• 《行者无疆》 - Java

• 《MOsky泽的专栏》 - Java

• 《JENSEN’s BLOG》 - Android

• 《点点滴滴》 - Android

• 《Li2的Android应用程序开发笔记》 - Android

• 《中二病也要开发ANDROID》 - Android

• 《iOS之路》 - iOS

• 《Aufree》 - iOS

• 《DevTalking 的专栏》 - iOS

• 《JSPatch》 - iOS

• 《汪海的实验室》 - iOS

• 《全干工程师》 - iOS / C

• 《pure render》 - React.js

• 《边城客栈》 - React.js

• 《太极客（Very Geek）》 - 前端

• 《听飞狐聊JavaScript设计模式系列》 - 前端

• 《hightopo 的专栏》 - 前端

• 《MonoLog》 - 前端

• 《dry》 - 前端

• 《专栏只能建一个》 - 前端

• 《Gore Liu 的技术博客》 - Linux

• 《AICODE.CC》 - Linux

• 《C/C++ 的奇技淫巧(雕虫小技)》 - C/C++

• 《大CC 的专栏》 - C/C++

• 《_Zhao》 - C/C++ / 服务端

• 《PHP烤猫》 - 服务端

• 《yexiaoxiaobai》 - 服务端 / Python

• 《Mr.Jing》 - 服务端

• 《kingshard技术交流》 - 服务端

• 《One Day One》 - 服务端

• 《Martin91》 - Ruby

• 《Steven Wu's Blog》 - Ruby

• 《TNaked》 - Angular.js

下节预告

2015 年，是 SegmentFault 社区快速成长的一年，上线了新的产品，发布了移动端，初步规范了社区机制；2015 年，也是 SegmentFault 社区内容不断优化的一年，非常感谢这多热心和优秀的开发者，给社区带来了极大的活力。

接下来，你猜会有什么呢？

前言

CSS代码难维护众所皆知。

• 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现；

• 作用于某个元素上的样式又可能来自单个样式规则，也可能来自多个样式的组合，还可能来自父元素；

• CSS样式可以定义在元素的style属性里面，也可以定义在页面head部分，还可以定义在单独的CSS文件中。

CSS样式定义上的灵活性带来的是CSS代码的多样性，如果毫无章节地使用这些定义样式的方式，势必会导致CSS代码的混乱和难以维护。本文将抛砖引玉，总结出几个方面来讨论如何编写可维护性的CSS代码。

Web前端开发入门难度并不高，但是初学者如果没有一个很好地学习和编码习惯，则开发水平的提高速度会变得很慢。 by 《Web前端开发最佳实践》党建

1.代码规范

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。by 编码规范 @mdo

命名规范和格式规范是代码规范中最基本的规范，任何代码的混乱都是从命令和格式的混乱开始，而意义明确的命名和规整的代码格式则提高了代码的可读性与可维护性，给阅读者和维护者留下来良好的第一印象。每个开发团队都应该有一套自己的规范。

• 组成类名称的关键字的连接符为中划线-。

.page-content-title {
    ...
}

• 为了避免class命名的重复，命名时取父元素的class名作为前缀。

/* 父元素的样式声明 */
.page-content {
    ...
}

/* 子元素的样式声明 */
.page-content-body {
    ...
}

• 在CSS样式定义中，左大括号放置在选择器的同一行，并和选择器之间添加一个空格分隔，在保证可读性的基础上缩短代码的行数；在样式声明中，属性名称和值之间用一个空格分隔，提高代码可读性。

/* 不推荐 */
.page-content-title
{
    border-left:1px solid #fff;
} 

/* 不推荐 */
.page-content-title{border-left:1px solid #fff;}

/* 推荐 */
.page-content-title {
    border-left: 1px solid #fff;
}

单行显示不好注释，不好备注，这应该是压缩工具的活儿~ by 前端编码规范之CSS - Barret Lee

• 多个选择器具有相同的样式声明时，每个选择器应该单独占一行，便于阅读和维护。

/* 不推荐 */
h1, h2, h3 {
    font-weight: bold;
    line-height: 1.5;
}

/* 推荐 */
h1,
h2,
h3 {
    font-weight: bold;
    line-height: 1.5;
}

• 在CSS样式文件中添加注释主要有两种类型：文件头部的文件信息注释和正文中的解释说明性注释。文件信息 一般包括文件版本、版权信息以及作者等；解释性说明的注释 有给模块的注释和单独给选择器的注释，模块的注释则需要添加注释表明模块样式定义的开始和结束，CSS选择器的注释需要添加在选择器的上一行，而不是和选择器相同一行。注释可以在压缩的时候选择性去掉。

/* 注释规范说明：文件头部的文件信息注释 */
/*!
 * page content v1.0
 *
 * Copyright 2015
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Designed and built by dopppler
 * /

/* 注释规范说明：模块样式定义的开始和结束 */
/* page container start */
.page-content {
    ...
}
.page-content-title {
    ...
}
...
/* page container end */

在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。by SASS用法指南 - 阮一峰的网络日志

2.结构组织

规范的 CSS 代码首先应该具有结构清晰和模块分明的特点。想象一下，如果在平时的开发中，拿到效果图就切，切完写，没有先从页面整体来规划样式，那么在开发的过程中就会出现某些代码块难以重用的情况，这样就只能从原来的代码中复制部分内容组合成新的样式定义。随着站点功能越来越多，CSS 代码中重复的代码就会越来越多，最终一发不可收拾。那么，该如何做才能组织CSS代码呢？

首先，组织CSS代码文件。所有的CSS都可以分为两大类：通用类和业务类。代码的组织应该把通用类和业务类的代码放置于不同的目录中。

css
 |-[业务类文件夹]
 |-[通用类-样式重置].css
 |-[通用类-公用组件].css
 |-[通用类-ie兼容].css

• [通用类-样式重置].css 的作用是重置元素的默认样式，目的时让元素在各浏览器中有统一的外观。CSS Reset 简单的一句全部重置太过粗暴，大部分人都已投向 Normalize.css 的怀抱，当然国内不少团队也总结出自己的一套 reset.css，建议自行搜索了解。

Normalize.css - A collection of HTML element and attribute style-normalizations.

• [通用类-公用组件].css 的作用是放置公用模块的样式和一些基础样式。公用模块包括页面对话框、提示框等公用组件的样式以及页面头部、底部、侧边栏等 UI 公用模块的样式。基础样式包括全局的页面布局设置、字体设置、背景和前景色等，也包括一些公有的class，这些公有class使用频繁，所以需要单独定义和使用，以提高代码的复用度。

强烈推荐使用 Less 和 Sass 等动态样式语言和预处理工具，方便写出高复用和高扩展性的 CSS 代码。

• [通用类-ie兼容].css 的作用是放置兼容旧版 IE 浏览器的样式。如果把兼容旧版IE的CSS代码和正常的代码放置在一起，这种做法有两个缺点，一是增加了非IE浏览器的加载样式文件的负担，二时如果未来决定不再支持旧版的IE浏览器，则需要修改多个文件，从而增加了维护的复杂度。

• 其余的CSS样式文件 则用于具体业务模块。不同模块的样式文件放置于不同的文件夹中。分隔模块的粒度并没有一个标准，原则上尽量保证每个模块对应的样式文件行数不超过200行，如果某个模块的样式文件太大，则会继续划分为更小的模块。

不要担心CSS样式文件过多，把关注点放在文件的管理上即可，因为到最后可以用自动构建工具把多个样式文件进行合并压缩处理。

3.元素单位

em、px 还是 % ？亦或是 rem ？页面元素的尺寸（长度、宽度、内外边距等）以及页面字体的大小时和页面整体布局息息相关的，而页面布局的方式又是多种多样的。因此，如果没有合理地设置页面元素尺寸以及字体的大小，就会增加页面布局的复杂性，也会使得页面布局维护变得困难，还会使页面的扩展性和使用平台受到限制。那么该如何设置元素的尺寸和字体大小，从而达到最佳的可维护性呢？可参考以下三个建议：

1. 尽量设置相对尺寸。页面应该是自适应呢，还是固定尺寸呢？这个取决于页面的设计。这里关注的是局部元素的尺寸要求使用相对大小，即局部自适应。这样当整体模块的尺寸更改时就不需要更改模块内部子模块的尺寸了。

2. 只有在可预知元素尺寸的情况下使用绝对尺寸。编写的代码一定要先遵循设计要求，在某些场合可能必须使用绝对尺寸，例如网页整体的宽度固定、侧边栏宽度固定、页头和页尾的高度固定等。

3. 使用 rem 设置字体大小。rem是个低调的单位，但在近一两年中开始火了起来。国内各大公司都已经投入使用，在一些常见的网站，如淘宝、腾讯、小米等移动站点，随处可见其踪影。详细用法可参见以下三篇文章或自行搜索了解。

web app变革之rem - 腾讯ISXUX
手机淘宝的flexible设计与实现 - 前端乱炖
MobileWeb 适配总结 - Lok'tar Ogar

4.样式重置

上文已提及，这里推荐阅读 @alsiso 同学写的 CSS Reset 专题文章。

关于CSS Reset那些事（一）- SegmentFault
关于CSS Reset那些事（二）- SegmentFault
关于CSS Reset那些事（三）- SegmentFault
关于CSS Reset那些事（四）- SegmentFault

5.样式排序

为什么要给样式排序？因为，如果CSS属性按照一定的规则排序，那么在开发过程中可以防止属性的重复定义，代码的检查者也能很清晰地查看CSS样式定义，更关键的是在后续维护过程中能快速定义特定的样式属性。尽管对CSS样式属性进行排序需要花费一些精力，但从代码的可读性和可维护性角度来考虑，这些付出将会是值得的。更何况，我们可以借助一些工具来完成。: )

一种较为合理的排序方式是 按类型分组排序。著名的 Web 前端专家 Andy Ford 推荐过一种按照类型分组排序的方式，他把CSS属性分为7大类：

• 显示与浮动（Display & Flow）

• 定位（Positioning）

• 尺寸（Dimensions）

• 边框相关属性（Margins、Padding、Borders、Outline）

• 字体样式（Typographic Styles）

• 背景（Backgrounds）

• 其他样式（Opacity、Cursors、Generated Content）

这种按照样式类型分组排列的方式不仅把功能相似的属性归类到一起，并且按照样式功能的重要性从上到下进行了排序。可以把影响元素页面布局的样式（如 float、margin、padding、height、width等）排到前面，而把不影响布局的样式（如background、color、font等）放到后面。这种主次分明的排列方式，极大地提高了代码的可维护性。

整理推荐的CSS属性书写顺序 - CSDN
推荐大家使用的CSS书写顺序、规范 - 设计达人

当然，如果在编写代码的时候直接按照这种方式写肯定有难度，而且不方便频繁地修改。最佳方式是编写代码的时候按照自己最有效率的方式来写，编写完成并提交的时候使用工具对其进行排序。推荐工具：CSScomb，一款免费高效并提供在线和主流代码编辑器插件的CSS排序工具。

CSScomb - Makes your code beautiful.

6.权重制衡

什么是权重？如果前端工程师没有深刻理解这个概念，将会很难写出高质量的CSS代码。在讨论权重之前，我们先来讨论一下一些基础知识。

CSS样式有 6 种基础选择器：

• ID 选择器（如 #page_content{}）

• 类选择器(如 .page-content-title{})

• 属性选择器（如 a[href="http://www.google.com"]{}）

• 伪类和伪对象选择器（如 :hover{}、::after{}）

• 标签类型（如 div{}）

• 通配符选择器（如 body *{}）

所有在CSS样式中定义的选择符都是由这 6 种基础选择器组合而成的，组合的方式分为三种：

• 后代选择符（如 .page .title{}）

• 子选择符（如 .page>.title{}）

• 相邻选择符（如 .page+.title{}）

CSS权重指的是这些选择器的优先级，优先级高的CSS样式会覆盖优先级的样式。优先级越高说明权重越高。根据 W3C 制定的CSS规范，CSS权重是通过如下规则计算的：

1. 计算选择符中的ID选择器的数量（=a）

2. 计算选择符中的类选择器、属性选择器以及伪类选择器的数量（=b）

3. 计算标签类型选择器的伪对象选择器的数量（=c）

4. 忽略全局选择器

按照规则，基础选择器具有这样的优先级：
ID > 类 | 伪类 | 属性选择器 > 标签类型 | 伪对象 > 通配符

分别计算 a、b、c 的值后，按顺序连接 a、b、c 三个数字组成一个新数值，此数值即为所计算的选择符的权重。另外，如果两个选择符的权重相同，则依照“就近原则”，最后定义的被采用。

你应该知道的一些事情——CSS权重 - W3CPlus

明白权重的计算规则后，我们可以制定一些相关原则来提高样式代码的重用性和可维护性。

1. CSS样式中尽量不要使用ID选择器。一个页面中不允许有两个相同的ID，如果使用了ID选择器就意味着此此样式只能作用于一个元素，不能复用于其他元素。

2. 减少子选择器的层级。降低选择符整体的权重，减少对HTML结构的依赖。

3. 使用组合的CSS类选择器。面向对象编程一条原则：“多组合，少继承”。

7.兼容分离

上文已提及。

那些为了兼容旧版浏览器而添加的额外代码，被成为 hack 代码。大部分前端程序员都不愿意写 hack 代码，因为 hack 代码不易理解且维护困难。

以下是兼容 IE 浏览器的一些实践：

• 熟悉 IE 浏览器中常见的样式兼容问题。IE 浏览器下的兼容问题一般分为两类，一类时浏览器本身的Bug，另一类是标准不兼容，或者不支持标准（这类问题居多）。

Browserhacks - ie

• 分离样式兼容代码。为了当未来某个时期不在支持某个旧版本的浏览器时，方便移除这些兼容代码。

在 IE 浏览器中可以使用条件注释，让不同浏览器加载不同的样式文件以达到兼容代码和正常代码分离的目的。

<link rel="stylesheet" media="screen" href="css/style.css" />
<!--[if IE 8]><link rel="stylesheet" media="screen" href="css/ie8.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" media="screen" href="css/ie7.css"><![endif]-->

另外，为了提高兼容样式的优先级，可以在根元素（<html>或者<body>元素）上针对不同的浏览器添加不同的样式类。

<!--[if IE 7]>       <html class="ie7"><![endif]-->
<!--[if IE 8]>       <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html>        <--<![endif]-->

参考

• 《Web前端开发最佳实践》党建

以上，欢迎拍砖斧正。

前言

上一篇系列文章整理了CSS选择器的基础使用方法，因为内容较多且细致，写了很多DEMO，目前将它整理成适合移动端浏览器的CSS选择器的参考手册，方便学习CSS的人参考使用，马上就要搞定了，之后会放出 (笑脸)。

本节内容会跟着上一节的内容继续完善，首先会补充CSS选择器的浏览器支持情况（主要是说IE），比如我们最常用的s1,s2,…,sN群组选择器在IE7时才被支持，并且IE7还支持了很多我们没有想到的选择器，如子元素选择器，属性选择器，了解后你会发现IE7还是挺了不起的。

之后还会补充平常使用选择器遇到的一些问题以及解决方案，最后了解浏览器是如何读取选择器的，怎样使用选择器能达到高效率。

浏览器支持

了不起的IE7

当我们在开发网页时，如果网页需要兼容IE6，那么自然地会把IE6和IE7浏览器归为一路货色，对于不兼容的选择器和属性都将不再考虑使用，可是你是否知道IE7相比IE6增加了许多选择器可以用，如群组选择器，相邻选择器，兄弟选择器，属性选择器。

以下选择器是不支持IE6，仅支持 IE7 及以上的浏览器

基本选择器

属性选择器

在IE7浏览器，单复选框的checked在属性选择器中是不被支持的，这部分内容会在下面的常见问题中详细说明。

伪类选择器

E:hover在IE6中只有a元素可用

伪元素选择器

平庸的IE8浏览器

虽然来到IE8的时代，但是对于新选择器的支持并不多，不过还好我们最常用的E:before和E:after配合content属性都在IE8中得到了很好的支持。

以下选择器不支持IE6，IE7，仅支持 IE8 及以上的浏览器

伪类选择器

伪元素选择器

狂拽炫酷*炸天的IE9

IE最好的时代就是迎接CSS3的到来，从IE9支持了一大坨新CSS3的伪类以及伪元素，我就勉强给IE使用上这个酷炫点的修饰语。

以下选择器不支持IE6，IE7，IE8，仅支持 IE9 及以上的浏览器

伪类选择器

伪元素选择器

让IE6-8支持伪类和属性选择器

如何才能让IE6~8支持CSS3伪类和属性选择器，也许你已经想到了，我们会用JavaScript工具来进行辅助，那么刚好|8e50989464f7517425e2c31ba2d6dd59424|就可以完成这件事情，而且使用起来很简单，只要把selectivizr.js引入到页面上就可以了，如下：

<!- -[if (gte IE 6)&(lte IE 8)]>

      <script type="text/javascript" data-original="selectivizr.js"></script>

<![endif]- ->

但是使用它还有一些注意事项：

1. 必须要引用一个JavaScript库，比如jQuery

2. 只能解析<link>标签引入的样式，如果是<style>定义的样式是不会解析的

3. 动态生成的DOM不会做二次映射

4. 需要在标准模式的DTD才能够生效

项目地址：http://selectivizr.com

常见问题与Bug

* 通配符造成继承失效

* {
    color:red;
}

#test{
    color:blue; 
}

<div id='test'>
    <a href="#">text</a>
</div>

▲ 最终text的颜色却是红色的

按照我们的理解，id的优先级是高于*通配符的，而文字也本应该继承id元素的color值，所以最终的文字应该是蓝色呀。

所以这里混淆了一个概念，继承的样式的优先级永远低于元素本身的样式，包括通配符选择器，所以大家在开发中，应该尽可能的避免滥用通配符，以免带来一些隐性问题。

关于这个问题，还可以参考《关于CSS特殊性的问题》

而在IE6及更早浏览器并不支持通配选择符(*)，只是将它忽略了，所以也变相的能看到效果。

E:hover 失效

E:hover伪类用于设置元素在其鼠标悬停时的样式，但是在某种情况会导致效果失效，如下:

#test {
    background:red;
}
#test div { 
    display:none;
}
#test:hover div{
    display:block;
    background:yellow;
}

<div id="test">触发我<div>看到我了吧</div></div>

▲ 当触发#test:hover时，此效果是在IE6中是无效的，因为在IE6中，E:hover伪类仅能用于a（超链接）对象，且该a对象必须要拥有href属性。

E:hover还有一种失效的状态，是大家最常见的，代码如下：

a:link {color:gray;}
a:hover{color:green;}
a:visited{color:yellow;}
a:active{color:blue;}

<a href="#nogo">文字</a>

▲ 当超链接处于a:hover时，你会发现其效果是无效，文字的颜色不会变成绿色，这是因为超链接的伪类样式书写是有固定顺序的，不能颠倒，这四个属性正确的定义顺序为：

a:link {}
a:visited {}
a:hover {}
a:active {}

E:focus 失效

#test:focus + p {
    font-weight:bold;
}

<button id="test">点击我触发focus</button>
<p>文字</p>

▲ 当点击button按钮触发:focus时将邻近元素的文字进行加粗，但是这个效果在IE8是失效的，如何来修复它呢，只需要添加一个空的:focus选择器，如下：

#test:focus + p {
    font-weight:bold;
}
#test:focus {}

E:first-line 失效

如果在当前选择器内使用了!important，:first-line伪类内部的定义的属性会被完全忽略，示例：

p {
    color:blue;
}
p:first-line {
    color:red !important;
}

<p>第一行文字，<br/>第二行文字</p>

▲ 正常情况下第一行的文字会变成红色，但是在IE8浏览器却忽略它没有任何变化，如何来解决这个问题呢，把!important去掉就好了，如下：。

p {
    color:blue;
}
p:first-line {
    color:red;
}

E:first-letter 失效

E:first-letter失效和E:first-line失效的问题是相同的，解决方案请参考上方。

E > F 失效

就是子选择器中间有注释会导致属性失效，如下：

#test > 
/*子选择器*/
p {
    color:red;
}

<div id="test">
    <p>文字</p>
</div>

▲ 如果你非要这样写注释，那么在IE7下会导致子选择器失效，同样，E + F邻近选择器也有同样的问题，如何解决呢，不在选择器中间添加注释就可以了。

性能优化

CSS 选择器我们都在使用，但是如何让它变的更简洁，高效呢？
首先选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器，但是在此之前我们需要先了解浏览器的匹配机制，就是它是如何读取我们的选择器的。

选择器匹配机制

#nav > a {
    color:red;
}

当我们看到这个选择器的时候，会认为首先会找到id为nav的元素，然后在找到其子元素，将样式属性应用到a元素上。

事实上，却恰恰相反，因为浏览器读取选择器时，不是按照我们的阅读习惯从左到右，而是遵循的从选择器的右边到左边进行读取的。

当我们知道这个匹配机制后，再回来看这个选择器，浏览器必须先遍历页面中所有的 a 元素，然后查找其父元素的id是否为nav，这样一来你就会发看似高效的选择器在实际中的匹配开销是很高的。

理解了CSS选择器从右到左匹配的机制后，我们再看以下两种选择器：

div #nav

#nav div

你是否会认为第2种选择器的效率要高于第1种，那么就错了，其实第一个选择器的效率更高，因为第一个选择器的关键选择器使用了#id选择器”，而第二个选择器的关键选择器使用的是div标签选择器。

这里所说的关键选择器，就是CSS选择器中最右边部分，它是被浏览器最先寻找的，那么哪类选择器是最高效的？哪个是会影响选择器效率的关键选择器？

选择器效率

在上面内容中我们了解浏览器的匹配机制，以及关键选择器的重要性，那么哪些CSS选择器能够减少性能损耗呢？

Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序：

1. id选择器（#id）

2. 类选择器（.className）

3. 标签选择器（div,h1,p）

4. 相邻选择器（h1+p）

5. 子选择器（ul > li）

6. 后代选择器（li a）

7. 通配符选择器（*）

8. 属性选择器（a[rel="external"]）

9. 伪类选择器（a:hover,li:nth-child）

从Steve Souders的CSS Test我们可以看出#id选择器和.className类选择器在速度上的差异很小很小。而在一个a标签选择器的测试上显示，它比#id选择器和类选择器的速度慢了很多，从这里我们可以看出#id、.className选择器 和 a标签、li a后代选择器中间的差异较大，但是相互之间的差异较小。

接下来举几个示例：

#nav {}
.menu{}

p#nav {}
p.menu {}

▲ 上面的选择器效率要高于下面的选择器，标签元素会降低选择器效率

优化建议

我们理解了CSS选择器从右到左匹配的机制，也了解关键选择器的重要性，以及CSS选择器的效率排序，那么在使用选择器的时候，通过避免不恰当的使用，来提升 CSS 选择器性能。

避免使用通用选择器

#nav * {…}

▲ 这个选择器所做的是选择所有在页面上的单个元素（是每个单个的元素），然后去看看它们是否有一个#nav的父元素。这是非常不高效选择器，开销太大了，应该避免关键选择器是通配选择器的情况。

避免使用标签或 class 选择器限制 id 选择器

/* Bad */
div#nav {…}
.menuBalck#menu {…}

/* Good */
#nav {…}
#menu {…}

▲ ID选择器本身就是唯一的，加上div反而增加不必要的匹配；

避免使用标签限制 class 选择器

/* Bad */
span.red {…}

/* Good */
.text-red {…}

▲ 在标签上定义class选择器，在开发和维护时容易混淆，一般不建议这样写。

避免使用多层标签选择器。使用 class 选择器替换，减少css查找

/* Bad */
a[href="#"] > span > em {…}

/* Good */
.className {}

▲ 这种情况建议直接定义.className 选择器，然后使用<em class="className"></em>

避免过渡使用子选择器

/* Bad */
div ul li a {}
div > ul > li > a {}

/* Good */
.className {…}

▲ 这种情况建议直接定义.className 选择器，然后使用<a class="className"></a>

避免过度限制选择器

/* Bad */
html body .wrapper #content a {}

/* Good */
#content a {}

▲ 这里至少有3个选择器是完全不需要的，过度限制选择器使浏览器工作比它实际需要的更繁重，花费的时间更多，所以这里应该避免。

利用可继承性

/* Bad */
#nav > li > a { color:red; } 

/* Good */
#nav { color:red; }

▲ 在使用选择器之前，请先考虑利用继承性实现

下一节继续整理选择器的优先级和继承性相关内容。