定义选择器

CSS 样式规则有两个主要部分。选择器决定将格式化应用到哪些元素，而声明则定义要应用的格式化。
最简单的选择器可以对给定类型的所有元素（如所有的 h2 标题）进行样式化，有的选择器允许我们根据元素的类、上下文、状态等来应用格式化规则。请记住，我们可以在一个选择器中组合使用多个选择器，例如，编写类选择器和属性选择器的复合选择器。
选择器决定样式规则应用于哪些元素。例如，如果要对所有的 p 元素添加 Georgia 字体、12 像素高的格式，就需要创建一个只识别 p 元素而不影响代码中其他元素的选择器。如果要对每个区域中的第一个 p 设置特殊的缩进格式，就需要创建一个稍微复杂一些的选择器，它只识别作为页面中每个区域的第一个元素的 p 元素。选择器可以定义五个不同的标准来选择要进行格式化的元素。
1.元素的类型或名称。
2.元素所在的上下文。
3.元素的类或 ID。
4.元素的伪类或伪元素。
5.元素是否有某些属性和值。
为了指出目标元素，选择器可以使用这五个标准的任意组合。在大多数情况下，只使用一个或两个标准即可。另外，如果要对几组不同的元素应用相同的样式规则，可以将相同的声明同时应用于几个选择器。

选择要格式化的元素，最常用的标准可能是元素的名称（也就是大家平常说的类型选择器，因为你指定了应用样式的元素的类型）。例如，可能要让所有的 h1 元素以大字号、粗体显示，让所有的 p元素以无衬线字体显示。
按照类型选择要格式化的元素
(1) 输入selector，其中selector 是目标元素的类型名称（不含任何属性）。
(2) 输入 {。
(3) 输入你希望应用到选中元素的样式，这要用属性 : 值对的形式表示。
(4) 输入 } 结束样式规则。

如果已经在元素中标识了 class或 id（参见最后一条提示），就可以在选择器中使用这个标准，从而只对已标识的元素进行格式化。不过推荐使用类选择器。

1. 按类选择要格式化的元素
   (1) 输入 .（点号）。
   (2) 不加空格，直接输入 classname，这里的classname 标识希望应用样式的类。
2. 按 id 选择要格式化的元素
   (1) 输入 #（井号）。
   (2) 不加空格，直接输入 id，这里的 id唯一标识希望应用样式的元素。

祖先（ancestor）是包含目标元素（后代，descendant）的任何元素，不管它们之间隔了多少代。（父元素是直接包含另一个元素的元素，它们之间只隔一代，被包含的元素称为子元素。）通常对元素的子元素增加缩进，从而可以清晰地看到它们之间的关系。缩进对页面的显示没有任何影响。
要实现某种效果，通常有多种构建选择器的方式可供选择。具体取决于你需要多大的特殊性。

1. 按祖先元素选择要格式化的元素
   (1) 输入ancestor，这里的ancestor 是希望格式化的元素的祖先元素的选择器。
   (2) 输入一个空格（必不可少）。
   (3) 如果需要，对后续的每个祖先元素重复第 (1) 步和第 (2) 步。
   (4) 输入 descendant，这里的 descendant是希望格式化的元素的选择器。
2. 按父元素选择要格式化的元素
   上面的例子展示了后代结合符。CSS 也 有子结合符，从而可以为父元素的直接后代（即子元素）定义样式规则。在 CSS3 之前，它们称为子选择器。
   (1) 输入 parent，这里的 parent 是直接包含待格式化元素的元素的选择器。
   (2) 输入 >（大于号）。
   (3) 如果需要，对后续每代父元素重复第(1) 步和第 (2) 步。
   (4) 输入 child，这里的 child 是要格式化的元素的选择器。
3. 按相邻同胞元素选择要格式化的元素
   下面继续讲我们的“家族”主题。同胞（sibling）元素是拥有同一父元素的任何类型的子元素。相邻同胞元素（adjacent sibling）是直接相互毗邻的元素，即它们之间没有其他的同胞元素。在下面这个简略的例子中，h1 和 p 是相邻同胞元素，p 和 h2 是相邻同胞元素，而 h1 和 h2 则不是相邻同胞元素。不过，它们都是同胞元素（也是body元素的子元素）。

CSS 相 邻 同 胞 结 合 符（adjacent sibling combinator）可以选择直接跟在指定的同胞元素后面的同胞元素。关于 CSS3 中新出现的普通同胞结合符（general sibling combinator），参见最后一条提示。
(1) 输入sibling，这里的sibling 是包含在同一父元素中的、直接出现在目标元素前面的元素的选择器。（它们不必是同一种元素类型，只要它们彼此直接相邻就行。）
(2) 输入 +（加号）。
(3) 如有需要，对每个后续的同胞元素重复第 (1) 步和第 (2) 步。
(4) 输入element，这里的element 是要格式化的元素的选择器。

选择某元素的第一个或最后一个子元素进行格式化
(1) 这一步可选，输入代表我们想应用样式的第一个或者最后一个子元素（如 p 或.news），参见最后一条提示。接下来千万不要有空格。
(2) 如果选择的是第一个子元素就输入:first-child（参见图 9.5.2），如果选择的是最后一个子元素，就输入 :last-child。

1. 选择元素的第一个字母
   (1) 输入element，这里的element 是要对其第一个字母进行格式化的元素的选择器。
   (2) 输入 :first-letter 以选择第 (1) 步中引用的元素的第一个字母。
2. 选择元素的第一行
   (1) 输入element，这里的element 是要对其第一行进行格式化的元素的选择器。
   (2) 输入 :first-line 以选择第 (1) 步中引用的元素的第一行。

按状态选择要格式化的链接元素的步骤
(1) 输入 a（a 是链接元素的名称）。
(2) 输入 :（冒号），前后都没有空格。
(3) 完成第 (2) 步以后，执行下列操作之一以表明你希望影响的链接状态：
1.输入 link 以设置从未被激活或指向，当前也没有被激活或指向的链接的外观；
2.输入 visited 以设置访问者已激活过的链接的外观；
3.输入 focus，前提是链接是通过键盘选择并已准备好激活的（注意：如果链接处于活跃状态也会获得焦点）；
4.输入 hover 以设置光标指向链接时链接的外观；
5.输入 active 以设置激活过的链接的外观。

按属性选择要格式化的元素
(1) 输入element，这里的element 是要考察其属性的元素的选择器。
(2) 输入attribute，这里的attribute 是选择元素需要考察的属性的名称。
(3) 以下步骤可选，根据需要输入：
1.输入 =“value”，表示属性值等于这里的value 的元素将被选中。
2.输入 ~=“value”，表示属性值包含这里的 value 的元素将被选中（属性值还可以包含其他内容，不同的属性值之间用空格分隔）。它必须匹配完整的
单词，而不是单词的一部分。
3.输入 |=“value”（前面是管道符号，而不是数字 1 或小写字母 l），表示
属性值等于这里的 value 或以 value-开头的元素将被选中。不要输入连字
符，浏览器知道搜索连字符（这常常用以搜索包含 lang 属性的元素，如在
HTML 中，[lang|=“en”] 会同时匹配lang=“en” 和 lang=“en-US”）。
4.输入 ^=“value”，表明属性值以这里的value 开头（作为完整的单词，或单
词的一部分）的元素将被选中（这是CSS3 中新增的特性）。
5.输入 $=“value”，表明属性值以这里的value 结尾（作为完整的单词，或单
词的一部分）的元素将被选中（这是CSS3 中新增的特性）。
6.输入 *=“value”，表明属性值至少包含这里的 value 一次的元素将被选中。也就是说，value 不必是属性值中的完整单词（这是 CSS3 中新增的特性）。
(4) 输入 ]。如果你想为元素指定其他属性或者属性值，可重复第 (2) ～ (4) 步。

将样式应用于元素组的步骤
(1) 输入selector1，这里的selector1 是受样式规则影响的第一个元素的名称。
(2) 输入 ,（逗号）。
(3) 输入selector2，这里的selector2 是受样式规则影响的下一个元素的名称。
(4) 对其他每个元素重复第 (2) 步和第(3) 步。