CSS设计指南（第三版）学习笔记 - 选择符汇总

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属性 
ID与类的写法相似，而且表示ID选择符的#（井号）的用法，也跟表示类选择符的.（句号）类似。 
如果有一个段落像下面这样设定了ID属性： 

This is the special text.

 
那么，相应的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.