Web前端开发笔记——第三章 CSS语言第二节 CSS选择器

Posted 2021-09-13 晚风(●•σ )

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第三章 CSS语言第二节 CSS选择器相关的知识，希望对你有一定的参考价值。

前言

CSS代码由选择器和一条或多条声明组成的，选择器是需要改变样式的 html标签，在CSS中由分号隔开每条代码为声明，且声明是以大括号{}括起来的。

之前我们阐述了CSS的基本概念，其中选择器是需要改变样式的 HTML标签，然而选择器分为三种：标签选择器、id选择器、class选择器，它们的作用都是设置CSS样式。

一、CSS选择器

（一）标签选择器

标签选择器对HTML中的标签设计样式。
例如，下列html代码中，设置h2标签样式字号为25像素且为红色，p标签样式字号为15像素且为蓝色：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h2 {
				color: red;
				font-size: 25px;
			}

			p {
				color: blue;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<h2>CSS</h2>
		<p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
		<p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
	</body>

</html>

运行结果如下：

（二）id选择器

id选择器，可以通过在CSS 使用"#“对特定 id 的 HTML标签设计特定的样式，即可对html中多个标签进行不同的CSS样式设置。若不使用”#"，则表示作用于当前html代码中所有该类型标签进行样式设置。
要注意多个id选择器不能同时使用，即id标签只能被引用一次。
例如，下列html代码中，id=style1的文本样式设置为红色、字号为15像素；id=style2的文本样式设置为蓝色、字号为15像素：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#style1 {
				color: red;
				font-size: 15px;
			}

			#style2 {
				color: blue;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<p id="style1">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
		<p id="style2">CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
	</body>

</html>

运行结果如下：

（三）类别选择器

类别选择器（class选择器），即用于对一组标签的样式设计，它可作用于多个标签且多次使用，通过设置html中标签的class属性，然后在CSS中使用“.”进行引用。
也可以在html标签中使用多个选择器名称，之间用空格隔开，从而对某个或多个标签设计多个样式。
例如，下列html代码中，对class="other red "的h2标签文字进行居中对齐、设置为红色，对class="red"的p标签样式设置为红色、字号为10像素，对class="blue"的p标签样式设置为蓝色、字号为15像素：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h2.other {
				text-align: center;
			}

			.red {
				color: red;
				font-size: 10px;
			}

			.blue {
				color: blue;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<h2>以下是CSS的介绍：</h2>
		<h2 class="other red">CSS</h2>
		<p class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
		<p class="blue">CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
		<p class="blue">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
	</body>

</html>

运行结果如下：

id标签也可以和class标签混合使用，例如下列html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red {
				color: red;
				font-size: 20px;
			}

			#style {
				color: blue;
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<h2>以下是CSS的介绍：</h2>
		<h2 class="red">CSS</h2>
		<p id="red" class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
	</body>

</html>

二、针对标签的选择器嵌套

当要对html标签中嵌套的标签进行样式设计时，在CSS代码中通过标签嵌套的标签{ }两个选择器来表示，标签和嵌套的标签中用空格隔开。
例如，下列html代码中，对文本中的“HTML”进行样式设计：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p span {
				color: red;
				font-size: 18px;
			}
		</style>
	</head>

	<body>
		<h2>CSS</h2>
		<p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p>
	</body>

</html>

运行结果如下：

三、集体声明和全局声明

（一）集体声明

在CSS代码中通过","对多个选择器间隔，即可对多个html标签进行集体声明。
例如，下列html代码中，对html中的h2标签和p标签进行统一的样式设计：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h2,p {
				color: red;
				font-size: 18px;
			}
		</style>
	</head>

	<body>
		<h2>CSS</h2>
		<p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p>
	</body>

</html>

运行结果如下：

（二）全局声明

在CSS代码中通过"*"对所有html标签进行统一的样式设计，即为全局声明。
例如，下列html代码中，对html中的所有标签进行统一的样式设计：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				color: orangered;
				font-size: 18px;
			}
		</style>
	</head>

	<body>
		<h2>CSS</h2>
		<p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p>
		<p>CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p>
	</body>

</html>