上次我们说到了建立CSS的三种方式，这一次我们开始将目光放在具体的实现细节上。我们知道，CSS样式规则有两个主要部分，选择器决定将格式化应用到哪些元素上，而声明则定义要应用的格式化，这一次，我们重点关注如何定义CSS选择器。
选择器可以定义五个不同的标准来选择要进行格式化的元素。
- 元素的类型或名称
|
h1{color:red;} |
- 元素所在的上下文
|
h1 em{color:red}; //这里em才是被选择的元素，只应用于包含在h1中的em |
- 元素的类和ID
|
.error{color:red;} //类 #gaudi{color:red;} //ID |
- 元素的伪类和伪元素
|
a:link{color:red;} //这种属于伪类元素，表示页面上未被访问的链接 |
- 元素是否有某些属性和值
|
a[title]{color:red;} //含有title属性的a元素 a[href="http://www.example.com"] //href属性值为该网址的a元素 |
选择器可以使用这五个标准的任意组合，多数情况下一到两个即可，也可以对几个不同的元素应用相同的样式。
注意：编写CSS的一个重要目标是让选择器尽可能的简单，仅保持必要的特殊性，充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时应将通用设计元素挑选出来，编写一个类，从而可以在不同的地方共享这种样式，CSS也更易于维护，尽量减少ID选择器的使用。
- 按名称选择元素
也即类型选择器，就是HTML中的各种标签，浏览器对于不同的标签会默认有一些样式，当然，你完全可以修改它。通配符*可以匹配所有的标签，因此也很少使用到。
- 按类或ID选择元素
按类选择：.classname ，关于class的名称最好抽象一些，比如说可以设置为color而非red。多个类可以叠加在一起，如.classname1.classname2，中间不用加空格，特殊性高于单一的类元素
按ID选择：#IDname
注意：除非必须特别针对目标元素，最后不要在id或class选择其中添加元素名称。一再强调的是，减少ID选择器的使用，但它仍有其存在的价值，如：在页面中定义锚，在编写JavaScript为特定的页面元素应用特殊行为时
- 按上下文选择元素
CSS中可以根据元素的祖先、父元素或者同胞元素来定位。
|
article p{color:red;} //article中的所有p元素，无论隔了多少代 article>p{color:red;} //article中的子元素为p的元素，只隔了一代 article h1+p{color:red;} //article后代元素中直接跟在h1后面的p元素 article h1~p{color:red;} //article后代元素中出现在h1后面的p元素（可以不直接相邻） |
- 选择第一个元素和最后一个元素
有时需要选择第一个或者最后一个元素，就要用到:first-child和:last-child伪类。
|
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> |
可以用ul li:first-child来选择第一个<li>元素，反过来用:last-child可以选择最后一个
- 选择元素的第一个字母或者第一行
我们可以使用伪类:first-letter和:first-line只选择元素的第一个字母或者第一行
比如：
|
p:first-letter{color:red;} //使得每段的第一个字母变成红色 |
至于:first-line，根据浏览器的显示效果，第一行不是固定的，但无论以何种方式看，受影响的始终只有第一行。
- 按状态选择链接元素
CSS允许根据连接的当前状态对他们进行格式化，这是通过一系列伪类实现的，链接的状态是由使用者决定的，在代码中是无法指定链接的状态的。
有这么几个伪类。
|
a:link{color:red;} //设置未被激活链接的样式 a:visited{color:orange;} //设置访问过的链接的样式 a:focus{color:purple;} / /设置获得焦点（通常是键盘选择）时链接的样式 a:hover{color:green;} //设置光标悬浮在链接上时的样式 a:active{color:blue;} //设置光标点击链接时的样式 |
应该始终按照上面的顺序定义链接的样式，避免链接处于多种状态，当然，只选择其中几个也是完全可以的。
- 按属性选择元素
可以给具有给定属性或属性值的元素进行格式化，CSS提供了多种方法，包括只检查属性名，检查全部或者部分属性值。
通用格式如下：
element[attribute="value"]，中括号可以继续写下去。
|
a[href]{color:red;} a[class="link"]{color:red;} |
- 指定元素组
我们经常需要将相同的样式规则应用于多个元素，一个一个设置自然可以，不过我们有更好的办法，即利用"组选择器"。
其实没有看上去那么复杂，只要将多个选择器用"，"隔开，就可在大括号里编写统一的样式。
|
h1, p, a{ color:red; } |
选择器不一定非得是元素名称，可以很复杂，上面前七条里的规则都可以，其实这只不过是把单独写的合并在一起了而已，拆开来效果一样。
有时为应用于多个选择器的共同样式设置一个规则，然后再为每个选择器设置更加个性化的样式，这种方法经常用到，要注意的是后面的规则会覆盖前面的规则。
总结：选择器越简单越好，不仅方便查询，而其便于维护，仅保持最低的特殊性即可，要知道，特殊性越强，适用性就越窄。从最简单的开始，逐渐的增强特殊性，完全符合"渐进增强"的原则。