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

时间 2019-11-09

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

原文原文链接

在上一篇文章中，咱们讲到基础选择器中的元素选择器、ID选择器、类选择器。本期咱们继续看一下伪类选择器、伪元素选择器、通用选择器的使用方法。html

伪类选择器浏览器

伪类是指逻辑上存在、但文档树中并不存在的“幽灵”分类，一般用于给元素某些特定状态添加样式。伪类典型的应用就是为超连接添加未访问、访问事后、悬停和活动四种连接状态。从效果上看，存在伪类对应的类名，但实际上并无这个类名，所以称之为伪类。性能

使用伪类选择器设置样式的语法以下：spa

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

语法说明：选择器能够是任意类型的选择器，伪类前的“:”是伪类选择器的标识，不能省略。表 2-1 列出了一些 W3C 规定的伪类。code

上表主要列举了 CSS2 中的一些伪类，还有一些有关 CSS3 的伪类将在本系列丛书后续的 CSS3 中进行一一介绍。htm

:active、:hover、:link 和 :visited 主要用于描述超连接的四种状态，咱们将在介绍超连接时演示这些伪类的用法；blog

cus 伪类的用法将在表单章节中进行演示。在本小节将演示 :first-child 伪类，以让你们熟悉伪类的使用方法。ip

【示例 2-10】使用伪类设置文档树中每层的第一个子元素的样式。utf-8

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用伪类设置文档树中每层的第一个子元素的样式 </title>
<style>
/* 设置文档树中每一层中类型为 piv 的第一个子元素的背景颜色 */
p:first-child{ 
	background:#80C6BE;
} 
</style>
</head>
<body>
	 <p> 妙味零基础课程 </p>
	 <p> 妙味 JavaScript 课程 </p>
	 <p> 妙味移动端课程 </p>
</body>
</html>

上述代码中的“<p></p>”是一个段落标签对，用于建立一个段落。有关段落标签的内容请参见第 5 章。代码中的“p:first-child”是一个伪类选择器，表示选择文档树中的每层元素的第一个子元素，且其类型为“p”。最终的结果是第一个 p 被设置为背景颜色，运行结果如图 2-10 所示。文档

示例 2-10 也能够不使用伪类而使用实际的类来达到一样的样式设置效果。为了使用实际的类来达到示例 2-10 的效果，须要在第一个段落标签中添加一个类名，并对该类名设置一个类选择器样式。

将示例 2-10 的代码作以下修改：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用实际的类实现伪类同等的样式设置效果 </title>
<style>
.first-child { 
	background:#80C6BE;
}
</style>
</head>
<body>
	 <p class="first-child"> 妙味零基础课程 </p>
	 <p> 妙味 JavaScript 课程 </p>
	 <p> 妙味移动端课程 </p>
</body>
</html>

上述代码的运行效果和示例 2-10 彻底等效。可见，伪类至关于在文档中存在一个对应的类，这正是伪类之因此称为“伪类”的缘由。

伪元素选择器

和伪类同样，伪元素也用于向选择器添加特殊的效果。伪元素之全部称为“伪元素”，缘由是伪元素只是在逻辑上存在但在文档树中却并不存在的“幽灵”元素，即从效果上看，文档树中存在对应伪元素的元素，但实际上在代码中并不存在这样的元素。

使用伪元素选择器设置样式的语法以下：

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

语法说明：选择器能够是任意类型的选择器，当选择器是类选择器时，为了限定某类元素，也能够在类选择器名前加上元素名，即将选择器名写成：元素名 . 类选择器名，好比 div.second:first-line。

另外，伪元素前的“:”是伪元素选择器的标识，不能省略。从上述语法来看，伪类和伪元素的写法很相似，在 CSS3 中，为了区分二者，规定伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

目前，W3C 规定了表 2-2 所示的一些类型的伪元素。

下面将经过示例演示上述各个伪元素的使用方法。

【示例 2-11】使用伪元素 first-line 设置文本的首行的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用伪元素 first-line 设置文本首行的样式。</title>
<style>
/* 设置文本首行的背景颜色 */
div:first-line{ 
	background:#80C6BE;
} 
</style>
</head>
<body>
	<div> 伪元素选择器能够是任意类型的选择器。当选择器是类选择器时，为了限定某类元素，也能够在类选择器名前加上元素名，即将选择器名写成：元素名 . 类选择器名，好比 div.second:first。</div>
</body>
</html>

上述代码中的“div:first-line”是一个伪类选择器，用于选择 div 内容中的首行。该选择器设置了首行的背景颜色样式，运行结果如图 2-11 所示。

【示例 2-12】使用伪元素 first-letter 设置文本的第一个字符样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用伪元素 first-letter 设置文本的第一个字符样式 </title>
<style>
/* 设置文本第一个字符的字号大小 */
div:first-letter{ 
 font-size:36px;
} 
</style>
</head>
<body>
	 <div> 伪元素选择器能够是任意类型的选择器。</div>
</body>
</html>

上述代码中的”div:first-letter”是一个伪元素选择器，用于选择 div 内容中的第一个字符。该选择器设置了第一个字符的字号大小，运行结果如图 2-12 所示。

【示例 2-13】使用伪元素 before 在元素前面添加内容并设置该内容的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>before 伪元素的使用 </title>
<style>
/* 在 div 前面添加内容并设置该内容的背景颜色 */
div:before{ 
	content:" 这是使用 before 伪元素添加的内容 "; /* 设置添加的内容 */
	background:#99F;
} 
</style>
</head>
<body>
 <div> 伪元素选择器能够是任意类型的选择器。</div>
</body>
</html>

上述代码中的“div:before”是一个伪元素选择器，用于在 div 内容前面添加一串文本（文本内容使用 content 属性来添加），同时设置这些文本的背景色，运行结果如图 2-13 所示。

【示例 2-14】使用伪元素 after 在元素后面添加内容并设置该内容的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>after 伪元素的使用 </title>
<style>
/* 在 div 后面添加内容并设置该内容的背景颜色 */
div:after { 
	content:" 这是使用 after 伪元素添加的内容 "; /* 设置添加的内容 */
	background:#99F;
} 
</style>
</head>
<body>
	<div> 伪元素选择器能够是任意类型的选择器。
	</div>
</body>
</html>

上述代码中的“div:after”是一个伪元素选择器，用于在 div 内容后面添加一串文本（文本内容使用 content 属性来添加），同时设置这些文本的背景颜色，运行结果如图 2-14 所示。

和伪类可使用具体的类来达到同等效果同样，伪元素也可使用具体的元素来达到同等效果。此时须要在代码的相应位置添加一个元素，同时使用元素选择器对该元素设置样式。

下面以示例 2-12 为例，将示例 2-12 的代码修改以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用元素设置文本的第一个字符样式 </title>
<style>
/* 添加元素选择器样式 */
span { 
	font-size:36px;
} 
</style>
</head>
<body>
	<div><span> 伪 </span> 元素选择器能够是任意类型的选择器。</div>
</body>
</html>

上述代码的运行效果和示例 2-12 的运行效果彻底同样。可见，伪元素至关于在文档中存在一个对应的元素，这正是伪元素之因此称为“伪元素”的缘由。

通用选择器

通用选择器又称为通配符选择器，使用通配符“*”表示，它能够选择文档中的全部元素。

使用通用选择器设置样式的语法以下：

*{ 
	 属性 1: 属性值 1；
	 属性 2: 属性值 2；
	 ...
	}

不少元素在不一样的浏览器中的默认样式是不同的，所以，为了兼容不一样的浏览器，须要重置元素的默认样式。最简单的重置元素样式的方法就是使用通用选择器，其中最经常使用的是使用通用选择器来重置文档元素的内、外边距。

示例代码以下：

/* 重置文档全部元素的内、外边距为 0px*/
*{
	margin:0px; /* 设置元素的四个方向的外边距为 0px*/
	padding:0px; /* 设置元素的四个方向的内边距为 0px*/
}

上述设置方式虽然简单，但对性能影响比较大，因此实际应用中不建议使用通用选择器来重置样式。

到这里，咱们已经把基础选择器都介绍完毕了，下一节咱们再来看看复合选择器相关的内容。