摘要：基本选择器主要包括元素选择器选择器类选择器伪类选择器伪元素选择器通用选择器元素选择器在标准中，元素选择器又称为类型选择器。例如，元素选择器就是声明当前页面中所有的元素的显示效果。
所谓基本选择器是指选择器的名称前面没有其他选择器，即在组成上，基本选择器是单一名称。
基本选择器主要包括：
元素选择器
ID 选择器
类选择器
伪类选择器
伪元素选择器
通用选择器
元素选择器
在 W3C 标准中，元素选择器又称为类型选择器。使用元素选择器设置样式的语法如下：
元素选择器 {
属性 1: 属性值 1；
属性 2: 属性值 2；
...
}
语法说明：元素选择器重新定义了 HTML 标签的显示效果，网页中的任何一个 HTML 标签都可以作为相应的元素选择器的名称，设置的样式对整个网页的该类元素有效。
例如，div 元素选择器就是声明当前页面中所有的 div 元素的显示效果。元素选择器样式应用是通过匹配 HTML 文档元素来实现的。
【示例 2-2】元素选择器使用。
元素选择器的使用 妙味公告妙味课堂miaov 公告miaov 课堂
上述 CSS 代码使用 div 作为元素选择器，这样就选中了页面上所有的 div 元素，因而在大括号内设置的任何样式，对页面中所有 div 元素都有效。运行结果如图 2-4 所示。
ID 选择器
从上一节的介绍中，我们知道，元素选择器可以选择某一类元素。很显然，如果需要某一类元素中某个元素设置特定的样式，比如，对示例 2-2 中第一个div元素设置不同样式，此时使用元素选择器将无满足需要，针对这种情况，我们可以使用 ID 选择器。
ID 选择器的名称为元素的 id 属性值，它可以针对一个元素进行样式设置，需注意的是 ID 名称在一个 HTML 页面中必须唯一，你可以理解为 ID 就像是一个人的身份证号一样，不可重复。所以一个 ID 选择器只允许设置一个元素的样式。在设置前必须加上标识符“#”。
使用 ID 选择器设置样式的语法如下：
#ID 选择器 {
属性 1: 属性值 1；
属性 2: 属性值 2；
...
}
语法说明：ID 选择器名称的第一个字符不能使用数字；ID 选择器名不允许有空格，选择器名前的“#”是 ID 选择器的标识，不能省略；另外，ID 选择器名区分大小写，应用时应正确书写。
【示例 2-3】ID 选择器使用。
ID 选择器的使用 妙味课堂妙味课程妙味讲师
上述代码中有 3 个 div 元素，其中第 3 个 div 设置了 id 属性，值为“teacher”。CSS 代码通过匹配 id 属性值，可知 ID 选择器选中了第 3 个 div 元素，因而其设置的绿色文本颜色以及加粗样式，只对第 3 个 div 元素有效，其他两个 div 元素的样式则保持默认效果。
示例 2-3 的运行结果如图 2-5 所示。
还有一些情况也很常见，例如我们希望有一列 div 具备公共样式，比如统一的背景、统一的大小等，但我们希望其中一个元素样式略有不同，希望针对这个元素设置特殊样式，此时我们可以结合元素选择器和 ID 选择器来共同设置样式：元素选择器设置公共样式，ID 选择器设置特殊样式。具体示例如下。
【示例 2-4】结合元素选择器和 ID 选择器共同设置元素样式。
结合元素选择器和 ID 选择器共同设置元素样式 妙味课堂miaov 课程妙味讲师
上述代码中的 3 个 div 元素内容都需要加粗并以 26px 字号显示，同时，都包含背景颜色，但第 3 个 div 元素内容的文本颜色要求为绿色。可见，三个 div 存在公共样式，同时，第三个 div 存在特殊样式。对 div 的公共样式可使用 div 元素选择器进行设置，而第 3个 div 的特殊样式则使用 ID 选择器进行设置，示例 2-4 在浏览器中的最终运行结果如图 2-6 所示。
由于 ID 名不可重复，所以 ID 选择器只能选择单个元素。ID 选择器的这个特性在某些情况下，会给我们带来不便。比如我们使用 ID 选择器对示例 2-2 中的 4 个 div 元素设置样式，要求是其中第 1 个和第 3 个 div 的文本颜色为红色，第 2 个和第 4 个 div 的文本颜色为蓝色。使用 ID 选择器就需要对各个 div 都设置好 id 属性，将示例 2-2 的代码修改如下。
【示例 2-5】页面存在多个元素具有相同样式时使用 ID 选择器的问题。
页面存在多个元素具有相同样式时使用 ID 选择器的问题 妙味公告妙味课堂miaov 公告miaov 课堂
示例 2-5 的 CSS 代码中，虽然第 1 个和第 3 个 div、第 2 个和第 4 个 div 的样式完全相同，但由于使用 ID 选择器，相同样式也要使用不同 ID 选择器去定义（因为 ID 名必须唯一）。可见，针对多个元素具有相同样式的情况，使用 ID 选择器是不可取的。此时是否可以使用元素选择器呢？很显然，这种情况下，元素选择器更不可取，因为元素选择器会让所有同类元素使用同一种样式。
有关类选择器的介绍请参见下一小节。示例 2-5 的运行结果如图 2-7 所示。
类选择器
在上一小节最后，我们说示例 2-5 中的样式设置使用类选择器最合适。那么什么是类选择器呢？其实，类选择器也是一种基本选择器，它和 ID 选择器一样，可以允许以一种独立于文档元素的方式来指定样式。与 ID 选择器不同的是，类选择器的名称为元素的 class 属性值，一个类名在 HTML 页面中可以重复出现多次，此外，类选择器名前面必须加上“.”作为标识符。
使用类选择器设置样式的语法如下：
. 类选择器 {
属性 1: 属性值 1；
属性 2: 属性值 2；
...
语法说明：类选择器名称的第一个字符不能使用数字；类选择器名前的“.”是类选择器的标识，不能省略；另外，类选择器的命名是区分大小的，应用时应正确书写。
下面使用类选择器设置示例 2-5 的 div 样式。大家可以看到，第 1 个和第 2 个 div 的 class 属性值一样，
第 3 个和第 4 个 div 的 class 属性值一样。
具体代码如下。
【示例 2-6】使用类选择器设置示例 2-5 的 div 样式。
类选择器的使用 妙味公告妙味课堂miaov 公告miaov 课堂
上述代码的运行结果和图 2-7 完全相同。
在 2.3.2 小节中，我们知道，ID 选择器可以在一组同类元素中选取某个元素，其实类选择器同样具有这个能力，但不同的是，类选择器可一次性选取若干个元素。
例如：有三组 div 元素，它们的字体大小均为 26px，并且是加粗显示，但其中前两个 div 的字体是绿色，且字体是斜体，在这样的需求下，可以结合元素选择器和类选择器来共同完成样式设置，具体示例如下。
【示例 2-7】结合元素选择器和类选择器共同设置元素样式。
