第二章 选择器

1. 声明和关键字：

一条声明中，属性值含有多个关键字时用空格隔开：
border: solid 1px red;

唯一例外情况：font属性中可以用斜线来分割设置字体大小和行高的两个关键字，例如：h2 {font: large/150% sans-serif;}

2. 根据属性和属性值选择元素：

h1[title="ppp"]
img[src][alt="t"]
根据部分属性值选择：

span[title~="barren"]{
  font-style: italic;
}```    
把 title 属性中有 barren 的所有元素变为斜体，例如 `title="barren is a bbk...“` 就会被匹配上。

#### 3.子串匹配属性选择器：
`[foo^="bar"]`  选择foo属性值以bar开头的所有元素
`[foo$="bar"]`  选择foo属性值以bar结尾的所有元素
`[foo*="bar"]`  选择foo属性值包含子串bar的所有元素

#### 4. 特定属性选择类型：
`*[lang|="en"]` 选择lang属性值等于en或以en开头的所有元素

#### 5. 后代选择器：
`ul em { color: gray; }`
两个元素之间的层次间隔可以是无限的，比如

<ul>
<li>
<a><em>abc</em></a>
</li>
</ul>

#### 6. 仅选择子元素：
`h1 > strong {color: red;}`
只选择子元素，孙子元素及其后代中若还有这个元素，则不受影响

#### 7. 选择相邻兄弟元素：
`h1 + p {margin-top: 0;}`
只选择与 h1 具有相同父元素的相邻 p 元素

#### 8. 伪类选择器：
`a: visited {color : red;}`
`a: link { color：blue；}`
所有伪类和伪类关键字前面都有一个冒号

- 动态伪类：
`: focus`   指示当前拥有输入焦点的元素
`: hover`   指示鼠标指针停留在哪个元素上
`: active`  指示被用户输入激活的元素

- **注意：**
`p: first-child`    选择的是作为某元素的子元素的第一个p
而不是 p 的第一个子元素
即，把某种幻象类关联到与伪类相关的元素。

- 根据语言选择：
`: lang()`伪类
例如，选择所有法语内容：
`: lang(fr){}`

- 结合伪类：
`a: link: hover {color: red;}`
鼠标停留在未访问的链接上时，链接变成红色
顺序不重要，`a: link: hover` 与  `a: hover: link` 会得到一样的效果。

#### 9.伪元素选择器：
`h2: first-letter{}`    选择所有h2的第一个字母
`p: first-line{}`       选择所有p元素的第一行
将选择的部分（第一个字母/第一行）作为一个假想元素
**注意**：所有伪元素都必须放在出现该伪元素的选择器的最后面。

- 设置前后元素的样式：
：before和：after（详见第十二章）