有效且结构良好的文档为我们要应用的样式提供了一个框架，但将CSS样式应用于特定的HTML元素，需要找到该元素。在CSS中，执行该任务的样式规则称为选择器。在本文，你可以学习到：
- CSS选择器
- CSS层叠和特殊性
- CSS继承
- CSS实践
现在一起开启CSS的奇妙之旅吧!
1. CSS选择器
CSS选择器包括:
-
类型选择器（也成为元素选择器），比如：p, ul, li, h1等
-
后代选择器（用于寻找特定元素或者元素组的后代，由其他两个选择器中间的空格表示）如下所示
-
ul a {color: red;} # 表示ul的后代的a元素， 其他a元素不受影响
-
-
ID选择器和类选择器（分别用“#” 和"."表示）
-
伪类，如:link, :visited称为链接伪类，只应用于锚元素。:hover, :active, :focus被称为动态伪类，理论上可应用于任何元素（IE6只注意应用于锚元素的:link, :visited完全忽略:focus；IE7任何元素都支持:hover,但是忽略:active,:focus）
-
伪元素选择器，包括:before, :after,:first-letter,:first-line。
-
通用选择器（*），其作用就像通配符，它匹配所有可用元素。
-
高级选择器（IE6和更低版本不支持）
-
子选择器：选择元素的直接后代，示例：
-
ul > li {font-size:20px;} #对于子选择器 如果父元素和子元素之间有注释，IE7中会出问题。
-
-
相邻同胞选择器：根据相邻关系应用样式，示例：
-
shuh2 + p {font-size:1.2em;} # 对h2元素后的第一个p元素应用样式 # 在目标元素之间有注释，IE7也会有问题
-
-
同胞选择器：选择某元素的同胞元素，示例
-
/* 设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色 要想在 IE8 及其之前的版本中使用这个选择器，必须声明 <!DOCTYPE>。 */ p~ul { background:#ff0000; }
-
-
属性选择器：根据某个属性是否存在或者属性的值选择元素。示例：
-
# 具有title属性的a元素，字体为红色 a[title] {color:red;} # rel属性值为”nofollow“的a元素，字体为蓝色 a[rel="nofollow"] {color: blue;} # 属性值有多个值，包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值; p[title~=hello] { color:blue; } #属性值组成中包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值 p[lang|=en] { color:blue; } ...... # 还有诸如^=的属性选择器，有兴趣可去查询，虽然一般并不会运用。
-
-
2. 层叠和特殊性
在一个样式表中，寻找同一个元素可能有多个规则。CSS通过层叠的过程处理这种冲突。层叠给每一个规则分配一个重要度，层叠的重要度次序如下：
- 标有!important 的用户样式
- 标有!important 的作者样式
- 作者样式
- 用户样式
- 浏览器/用户代理应用的样式
然后，根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的特殊性相同，后定义的优先。
2.1 特殊性
规则的特殊性基于选择器的特殊性。为了计算规则的特殊性，给每种选择器都分配一个数值。然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。选择器的特殊性分为四个等级：a,b,c,d
-
如果是行内样式，即元素的style属性中的规则，a=1
-
b等于ID选择器的总数
-
c等于类，伪类，和属性选择器的数量
-
d等于类型选择器和伪元素选择器的数量
-
通配符和结合符特殊性最低，为0
示例：
| 选择器 | 特殊性 | 以10为基数的特殊性 |
|---|---|---|
| style="" | 1,0,0,0 | 1000 |
| container #nav {} | 0,2,0,0 | 200 |
| container .banner {} | 0,1,1,0 | 110 |
| p.commited {} | 0,0,1,1 | 11 |
| p {} | 0,0,0,1 | 1 |
虽然这里给出了每个类型选择器的特殊性的数值，但是基本上，用style属性编写的规则总比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。最后，当两个规则的特殊性相同，那么后定义的规则优先。
3. 继承
继承和层叠虽然初看上有点相似但是概念实际上不太一样。继承是一个比较容易理解的概念。应用样式的元素的后代会继承样式的某些属性，比如颜色和字号。如果将主体的字号设置为1.4em，那么页面上的所有内容应该也会继承这个字号（windows的IE在继承表格字号方面有问题，需要在表格单独设置字号或者指定表格应该继承字号）。
如果在主体上设置字号，我们会发现页面上的标题没有采用这个字号，这是由于浏览器的默认样式表设置了标题字号，直接应用于元素的任何样式表总会覆盖继承而来的样式（继承而来的样式的特殊性为空）。
继承这一特性十分有用，可以使得开发人员不必在元素的后代上添加相同的样式。正如恰当的使用层叠可以简化CSS，恰当的使用继承也可以减少代码中选择器的数量和复杂性。
4. CSS最佳实践
该小结将提供一些本人写CSS的最佳实践，觉得不错可以纳入自己的知识体系。
-
当规则包含多个选择器，每个选择器声明独占一行
-
>，+,~选择器的两边各保留一个空格
-
每个属性声明末尾加分号
-
在url中使用双引号，属性选择器的属性值也使用双引号
-
单个属性声明不换行
-
不为id选择器、类选择器添加类型选择器进行限定(对性能和维护都有影响，位置靠后的限定条件应该尽可能精确)
-
/* 不推荐 */ p .articel { width:100px; } /* 推荐 */ .article { width:100px; }
-
-
选择器的嵌套层级应不大于3层
-
鼠标手型
- 用户可以点击的盒子声明cursor:pointer;以显示手型
- 图片放大缩小 cursor:zoom-in , cursor:zoom-out
-
左右浮动分离
-
不适用‘*’选择器
-
属性值0后面不加单位
-
正确使用display属性
- display: inline后不应该再使用 width、height、margin、padding 以及 float；
- display: inline-block 后不应该再使用 float；
- display: block 后不应该再使用 vertical-align；
- display: table-* 后不应该再使用 margin 或者 float；
- 尽量少用float