即学即用，轻松搞定这些选择器！（上）

图片描述

所谓基本选择器是指选择器的名称前面没有其他选择器，即在组成上，基本选择器是单一名称。

基本选择器主要包括：

元素选择器
ID 选择器
类选择器
伪类选择器
伪元素选择器
通用选择器

元素选择器
图片描述

在 W3C 标准中，元素选择器又称为类型选择器。使用元素选择器设置样式的语法如下：

元素选择器 { 
属性 1: 属性值 1；
属性 2: 属性值 2；
 ... 
}

语法说明：元素选择器重新定义了 HTML 标签的显示效果，网页中的任何一个 HTML 标签都可以作为相应的元素选择器的名称，设置的样式对整个网页的该类元素有效。

例如，div 元素选择器就是声明当前页面中所有的 div 元素的显示效果。元素选择器样式应用是通过匹配 HTML 文档元素来实现的。

【示例 2-2】元素选择器使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 元素选择器的使用 </title>
<style>
div { /* 使用 div 标签作为元素选择器 */
     font-size:32px; /* 设置字体大小样式 */
     color:red; /* 设置字体颜色样式 */
}
</style>
</head>
<body>
 <div> 妙味公告 </div>
 <div> 妙味课堂 </div>
 <div>miaov 公告 </div>
 <div>miaov 课堂 </div>
</body>
</html>

上述 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 选择器使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> ID 选择器的使用 </title>
<style>
#teacher{ /* 使用 ID 选择器 */
 color:green; /* 设置文本颜色样式 */
 font-weight:bold; /* 设置文本加粗样式 */
}
</style>
<body>
 <div> 妙味课堂 </div>
 <div> 妙味课程 </div>
 <div id="teacher"> 妙味讲师 </div>
</body>
</html>

上述代码中有 3 个 div 元素，其中第 3 个 div 设置了 id 属性，值为“teacher”。CSS 代码通过匹配 id 属性值，可知 ID 选择器选中了第 3 个 div 元素，因而其设置的绿色文本颜色以及加粗样式，只对第 3 个 div 元素有效，其他两个 div 元素的样式则保持默认效果。
示例 2-3 的运行结果如图 2-5 所示。

还有一些情况也很常见，例如我们希望有一列 div 具备公共样式，比如统一的背景、统一的大小等，但我们希望其中一个元素样式略有不同，希望针对这个元素设置特殊样式，此时我们可以结合元素选择器和 ID 选择器来共同设置样式：元素选择器设置公共样式，ID 选择器设置特殊样式。具体示例如下。

【示例 2-4】结合元素选择器和 ID 选择器共同设置元素样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 结合元素选择器和 ID 选择器共同设置元素样式 </title>
<style>
/* 使用元素选择器设置元素的下边距、字体加粗、字号大小以及背景颜色公共样式 */
div{
    margin-bottom:6px; /* 设置下边距 */
    background:#CFF; /* 设置背ఀ颜色 */
    font-weight:bold; /* 设置文本加粗 */
    font-size:26px; /* 设置字号大小 */
}
/* 使用 ID 选择器设置元素的文本颜色特殊样式 */
#teacher{ 
 color:green; /* 设置文本颜色 */
}
</style>
</head>
<body>
<div> 妙味课堂 </div>
<div>miaov 课程 </div>
<div id="teacher"> 妙味讲师 </div>
</body>
</html>

上述代码中的 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 选择器的问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 页面存在多个元素具有相同样式时使用 ID 选择器的问题 </title>
<style>
#notice1{
    color:red;
}
#course1{
    color: blue;
}
#notice2{
    color:red;
}
#course2{
    color:blue;
}
</style>
</head>
<body>
     <div id="notice1"> 妙味公告 </div>
     <div id="course1"> 妙味课堂 </div>
     <div id="notice2">miaov 公告 </div>
     <div id="course2">miaov 课堂 </div>
</body>
</html>

示例 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 样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 类选择器的使用 </title>
<style>
.red{
      color:red;
}
.blue{
      color:blue;
}
</style>
</head>
<body>
      <div class="red"> 妙味公告 </div>
      <div class="red"> 妙味课堂 </div>
      <div class="blue">miaov 公告 </div>
      <div class="blue">miaov 课堂 </div>
</body>
</html>

上述代码的运行结果和图 2-7 完全相同。
在 2.3.2 小节中，我们知道，ID 选择器可以在一组同类元素中选取某个元素，其实类选择器同样具有这个能力，但不同的是，类选择器可一次性选取若干个元素。

例如：有三组 div 元素，它们的字体大小均为 26px，并且是加粗显示，但其中前两个 div 的字体是绿色，且字体是斜体，在这样的需求下，可以结合元素选择器和类选择器来共同完成样式设置，具体示例如下。

【示例 2-7】结合元素选择器和类选择器共同设置元素样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 结合元素选择器和类选择器共同设置元素样式 </title>
<style>
/* 使用元素选择器设置元素的字体加粗以及字号大小公共样式 */
div{ 
    font-weight:bold; 
    font-size:26px;
} 
/* 使用类选择器设置元素的字体格式和文本颜色特殊样式 */
.miaov{
    color:green;
    font-style:italic;
}
</style>
</head>
<body>
<divclass="miaov"> 妙味课程 </div>
<divclass="miaov"> 妙味课堂 </div>
<div> 学员作品 </div>
</body>
</html>

上述代码在浏览器的运行结果如图 2-8 所示。

图片描述

示例 2-5 和示例 2-7 虽然体现了元素选择器和 ID 选择器、类选择器的组合应用场景，但在真实的项目开发中，我们通常不会给 div 做这样的全局样式设置，因为这样会干扰到页面其他 div 元素。真实的项目开发中，更常见的做法是在一个 class 属性中使用多个类名来区分样式。

先来看看多个 class 属性值的设置。class 属性值中除了包含一个类，还可以包含多个类，即一个词列表（类名列表），各个词之间使用空格分隔。比如：<div class="miaov green"></div>，这里面的 “miaov green” 就是不同的类名，在一个 class 属性内，不仅可以设置两个，还可以设置多个，根据实际开发需要而定。因此，图 2-8 的代码实现，可以改写成如下示例。

【示例 2-8】设置多个类名来共同设置元素样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用多个类名共同设置元素样式 </title>
<style>
/* 使用元素选择器设置 miaov 类的字体加粗以及字号大小公共样式 */
.miaov { 
    font-weight:bold; 
    font-size:26px;
} 
/* 使用 green 类选择器设置元素的字体格式和文本颜色特殊样式 */
.green {
    color:green;
    font-style:italic;
}
</style>
</head>
<body>
    <divclass="miaov green"> 妙味课程 </div>
    <div class="miaov green"> 妙味课堂 </div>
    <div class="miaov"> 学员作品 </div>
</body>
</html>

上述代码在浏览器中的运行结果和图 2-8 所示一致，但由于使用到多个类名，页面中再添加其他 div 元素，也不会受到干扰了。

此外，还有一种工作中不常见的选择器——多类选择器，为保证知识点的完整，在本书中对其做简单介绍，它的设置方式依然是 class="miaov green hot"，但在定义 CSS 选择器时，需要以 .miaov.green.hot 作为选择器名称，这种选择器称之为多类选择器。

使用多类选择器设置样式的语法如下：

. 类选择器 1 . 类选择器 2 . 类选择器 3...{ 
属性 1: 属性值 1；
属性 2: 属性值 2；
  ...

语法说明：. 类选择器 1. 类选择器 2. 类选择器 3……各个类选择器之间不能有空格。多类选择器只能选择包含这些类名的元素（类名的顺序不限）。如果多类选择器包含了类名列表中没有的类名，匹配就会失败。

【示例 2-9】使用多类选择器来进行元素样式设置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用多类选择器来进行元素样式设置 </title>
<style>
/* 使用多类选择器进行样式设置 */
.miaov.green.hot { 
     font-weight:bold; 
     font-size:26px;
}
</style>
</head>
<body>
<div class="miaov green hot"> 妙味课程 </div>
</body>
</html>

以上代码在浏览器中的运行结果如图 2-9 所示。

图片描述

当设置多类选择器时，必须正确写成 .miaov.green.hot 才能实现，写成 .miaov.green 也可以正确设置。但如果写成：.miaov.green.abc，即使样式表中存在 .abc 这个类，也会导致样式设置无效。

图片描述

本文就到这里啦，下节我们继续介绍伪类选择器、伪元素选择器、通用选择器，大家可以关注起来。

即学即用，轻松搞定这些选择器！（上）

healar

引用和评论

隔离不隔爱，妙味暖心伴

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具