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

时间 2019-11-07

标签即用轻松搞定这些选择器繁體版

原文原文链接

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

基本选择器主要包括：浏览器

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

元素选择器字体

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

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

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

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

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

<!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 所示。utf-8

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 这个类，也会致使样式设置无效。

本文就到这里啦，下节咱们继续介绍伪类选择器、伪元素选择器、通用选择器，你们能够关注起来。