CSS的选择符还是很多的，特别是CSS3里又新增了些，为了方便记忆，特将（图灵出版）有关选择符章节的阐述做个归纳汇整。
顺带夸一下本书：第二版我就看过，这次的第三版针对HTML5和CSS3的最新发展，进行了全面更新，内容更出彩，组织更合理，思路更清晰，逻辑更突出，是一本循序渐进式的掌握CSS3知识的好书。
1. 上下文选择符
p em {color:green;}
标签1 标签2 {声明}，标签2就是我们想要选择目标，而且只有在标签1是其祖先元素（不一定是父元素）的情况下才会被选中。
2. 子选择符>
section >h2 {font-style:italic;}
标签1 > 标签2 {声明}，标签1必须是标签2的父元素。
3. 紧邻同胞选择符+
h2 +p {font-variant:small-caps;}
标签1 + 标签2 {声明}，标签2必须紧跟在其同胞标签1的后面。
4. 一般同胞选择符~
h2 ~a {color:red;}
标签1 ~ 标签2 {声明}，标签2必须跟（不一定紧跟）在其同胞标签1后面。
5. 通用选择符*
* {color:green;}
* {声明}，通用选择符*常被称为星号选择符，是一个通配符，它匹配任何元素，杀伤力巨大。
不过，一般在使用选择符时，都会同时使用另一个选择符，比如：
p * {color:red;}
这样只会把p包含的所有元素的文本变成红色。
还可以用它构成非子选择符，比如：
section * a {font-size:1.3em;}
任何是section孙子元素，而非子元素的a标签都会被选中。至于a的父元素是什么，没有关系。
6. 类选择符
.specialtext {font-style:italic;}
.类名 {声明}，类选择符就是在HTML类名前面加一个点（英文句号）。
7. 标签带类选择符
p.specialtext {color:red;}
标签.类名 {声明}，如上，只选择带specialtext类的段落，设置红色。
p.specialtext span {font-weight:bold;}，带specialtext类的段落->span里的内容为粗体。
8. 多类选择符 Here the span tag may or may not be styled.
什么是多类？！：
这好像不常用哦？
HTML的class属性可以有多个空格分隔的值。要选择同时存在这两个类名的元素，可以这样写：
.specialtext.featured {font-size:120%;}
注意，CSS选择符的两个类名之间没有空格。
9. ID属性 This is the special text.
ID与类的写法相似，而且表示ID选择符的#（井号）的用法，也跟表示类选择符的.（句号）类似。
如果有一个段落像下面这样设定了ID属性：
那么，相应的ID选择符就是这样的：
#specialtext {声明}
或者这样的：
p#specialtext {声明}
10. 广告插播时间：什么时候用ID？什么时候用类？以及若干注意点
ID的用途是在页面中唯一地标识一个元素。ID值的唯一性对JavaScript尤其重要，通过ID，JavaScript就能与某个标签关联起来，并玩出动感花样出来。经常会给页面中每个顶级区域都添加一个ID，从而得到非常明确的上下文，以便编写CSS时只选择嵌套在相应区域内的标签。
类的目的是为了标识一组具有相同特征的元素。你不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。
11. 属性名选择符
img[title] {border:2px solid blue;}
会导致像下面这个带有title属性的HTML img元素显示2像素宽的蓝色边框，至于title属性有什么值，无关紧要，只要有这个属性在就行啦。
标签名[属性名] {声明}。
12. 属性值选择符
img[title="red flower"] {border:4px solid green;}
标签名[属性名="属性值"] {声明}，这个一看就懂了。
13. 预热一下：“伪类”
伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。
- UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。
- 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。
14. 链接伪类 - UI伪类
针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。
- Link。此时，链接就在那儿等着用户点击。
- Visited。用户此前点击过这个链接。
- Hover。鼠标指针正悬停在链接上。
- Active。链接正在被点击（鼠标在元素上按下，还没有释放）。
以下就是这些状态对应的4个伪类选择符（使用了a选择符和一些示例声明）：
a:link {color:black;}
a:visited{color:gray;}
a:hover{text-decoration:none;}
a:active{color:red;}
由于这4个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果。为了好记，我建议大家可以这么想：“LoVe? HA!”大写字母就是每个伪类的头一个字母。
选择符中与众不同的:（冒号）好像在向我们宣示：“我是一个伪类！”。一个冒号（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1和CSS 2的伪元素使用一个冒号，但希望你能习惯于用双冒号代替单冒号，因为这些单冒号的伪元素最终可能都会被淘汰掉。
15. :focus伪类 - UI伪类
input:focus {border:1px solid blue;}
会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
e:focus {声明}。
16. :target伪类 - UI伪类
More Information
位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的：
This is the information you are looking for.
那么，如下CSS规则
#more_info:target {background:#eee;}
会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。
e:target {声明}。
17. 结构化伪类
结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。
:first-child和:last-child
e:first-child
e:last-child
:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。
比如，把下面的规则
ol.results li:first-child {color:blue;}
应用给以下标记：
-
<ol class="results">
-
<li>My Fast Pony</li>
-
<li>Steady Trotter</li>
-
<li>Slow Ol Nag</li>
- </ol>
文本“My Fast Pony”就会变成蓝色。
:nth-child
e:nth-child(n)
e表示元素名，n表示一个数值（也可以使用odd或even）。
li:nth-child(3)
选择一组列表项中的每个第三项。
18. 伪元素
伪元素就是你的文档中若有实无的元素。
注意：搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。
::first-letter
p::first-letter {font-size:300%;}
段落首字符放大。
e::first-letter {声明}
::first-line
选中文本段落（一般情况下是段落）的第一行。
::before和::after伪元素 25
可用于在特定元素前面或后面添加特殊内容。
以下标记
和如下样式
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
能得到以下结果：
Age: 25 years.
