文章目录

• 第9章
• 第9章 定义选择器

• 9.1 构造选择器
• 9.2 按名称选择元素
• 9.3 按类或ID选择元素
• 9.4 按上下文选择元素
• 9.5 选择第一个或最后一个子元素
• 9.6 选择元素的第一个字母或者第一行
• 9.7 按状态选择链接元素
• 9.8 按属性选择元素
• 9.1 构造选择器
• 9.2 按名称选择元素
• 9.3 按类或ID选择元素
• 9.4 按上下文选择元素
• 9.5 选择第一个或最后一个子元素
• 9.6 选择元素的第一个字母或者第一行
• 9.7 按状态选择链接元素
• 9.8 按属性选择元素

• 5种选择器标准

1.元素的名称

2.元素所在的上下文

3.元素的类或id

4.元素的伪类或者伪元素

5.元素的属性或者属性的值

提示　编写CSS的一个重要目标就是让选择器尽可能的简单，仅保持必要的特殊性。应该充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时，应该将页面中的通用设计元素挑选出来，编写一个选择器（如类名），从而可以在全站不同的元素上共享该样式。这样，样式表通常会变得更小，也更容易维护。

• 类型选择器：选择元素的名称

提示　通配符*（星号）匹配代码中的任何元素名称。例如，使用* { border: 2px solid green; }会让每个元素都有一个2像素宽的绿色实线边框！因为匹配范围太广，会让浏览器加载页面变慢，因此应该谨慎使用通配符。实际适合使用通配符的情况比较少。

• 类选择器：
• id选择器：

提示　可以单独使用class和id，也可以同其他选择器标准混在一起使用。例如，.news { color: red; }会影响所有属于news类的元素，而h1.news { color: red; }只会影响属于news类的h1元素。除非必须特别针对目标元素，最好不要在id或class选择器中添加元素名称。

• 上下文选择器：根据元素的祖先、父元素或同胞元素来定位

1.按祖先元素的祖先

2.按父元素

3.按同胞元素

• 相邻同胞结合符：可以选择直接跟在指定的同胞元素后面的同胞元素

• 普通同胞结合符：可以选择那些并非直接出现在另一同胞元素后面的同胞元素

• 和伪类：可以选择某元素的第一个或最后一个子元素进行格式化

• 伪元素：只选择元素的第一个字母

`first-letter可以实现每段首字母大写大写的效果

• 伪元素：只选择元素的第一行

调整浏览器窗口会改变每段第一行的具体内容，但选择器选中的始终是第一行

提示　只有某些特定的CSS属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动的）、text-transform、line-height、margin、padding、border、float和clear。

提示　第一个字母前面的标点符号（如引号）会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性

• CSS3语法
• 伪元素：、、、
• 伪类：、、等

未来，和这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。

• CSS允许根据链接的当前状态对它们进行格式化，参见图9.7.1。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系列伪类实现这一特性

1. 输入以设置从未被激活或指向，当前也没有被激活或指向的链接的外观
2. 输入以设置访问者已激活过的链接的外观
3. 输入，前提是链接是通过键盘选择并已准备好激活的
4. 输入以设置光标指向链接时链接的外观
5. 输入以设置激活过的链接的外观

提示　要对链接指定样式，不一定要指定伪类（因此第(2)步和第(3)步都是可选的步骤）。例如，使用a { color: red; }会让链接的所有状态显示为同一种样式。不过，最好使用伪类区分不同状态的样式，这样做可以方便访问者。

提示　也可以对其他类型的元素使用和伪类。例如，设置以后，鼠标停留在任何段落上段落都会显示为红色

提示　由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）

• 5种选择器标准

1.元素的名称

2.元素所在的上下文

3.元素的类或id

4.元素的伪类或者伪元素

5.元素的属性或者属性的值

提示　编写CSS的一个重要目标就是让选择器尽可能的简单，仅保持必要的特殊性。应该充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时，应该将页面中的通用设计元素挑选出来，编写一个选择器（如类名），从而可以在全站不同的元素上共享该样式。这样，样式表通常会变得更小，也更容易维护。

• 类型选择器：选择元素的名称

提示　通配符*（星号）匹配代码中的任何元素名称。例如，使用* { border: 2px solid green; }会让每个元素都有一个2像素宽的绿色实线边框！因为匹配范围太广，会让浏览器加载页面变慢，因此应该谨慎使用通配符。实际适合使用通配符的情况比较少。

• 类选择器：
• id选择器：

提示　可以单独使用class和id，也可以同其他选择器标准混在一起使用。例如，.news { color: red; }会影响所有属于news类的元素，而h1.news { color: red; }只会影响属于news类的h1元素。除非必须特别针对目标元素，最好不要在id或class选择器中添加元素名称。

• 上下文选择器：根据元素的祖先、父元素或同胞元素来定位

1.按祖先元素的祖先

2.按父元素

3.按同胞元素

• 相邻同胞结合符：可以选择直接跟在指定的同胞元素后面的同胞元素

• 普通同胞结合符：可以选择那些并非直接出现在另一同胞元素后面的同胞元素

• 和伪类：可以选择某元素的第一个或最后一个子元素进行格式化

• 伪元素：只选择元素的第一个字母

`first-letter可以实现每段首字母大写大写的效果

• 伪元素：只选择元素的第一行

调整浏览器窗口会改变每段第一行的具体内容，但选择器选中的始终是第一行

提示　只有某些特定的CSS属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动的）、text-transform、line-height、margin、padding、border、float和clear。

提示　第一个字母前面的标点符号（如引号）会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性

• CSS3语法
• 伪元素：、、、
• 伪类：、、等

未来，和这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。

• CSS允许根据链接的当前状态对它们进行格式化，参见图9.7.1。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系列伪类实现这一特性

1. 输入以设置从未被激活或指向，当前也没有被激活或指向的链接的外观
2. 输入以设置访问者已激活过的链接的外观
3. 输入，前提是链接是通过键盘选择并已准备好激活的
4. 输入以设置光标指向链接时链接的外观
5. 输入以设置激活过的链接的外观

提示　要对链接指定样式，不一定要指定伪类（因此第(2)步和第(3)步都是可选的步骤）。例如，使用a { color: red; }会让链接的所有状态显示为同一种样式。不过，最好使用伪类区分不同状态的样式，这样做可以方便访问者。

提示　也可以对其他类型的元素使用和伪类。例如，设置以后，鼠标停留在任何段落上段落都会显示为红色

提示　由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）