CSS元素选择器：样式设置与高效实践-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109062145

1. CSS选择器用于"查找"(或选取)要设置样式的html元素。

2. CSS元素选择器/类型选择器

2.1. 元素选择器匹配文档元素的名称。元素选择器匹配文档树中该元素名称的每一个实例。

2.2. 最常见的CSS选择器是元素选择器。换句话说, 文档的元素就是最基本的选择器。

2.3. 在W3C标准中, 元素选择器又称为类型选择器(type selector)。

2.4. 元素选择器通常是某个html元素, 比如: p、h1、em、a, 甚至可以是html本身。

3. 使用元素选择器设置html的样式

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS元素选择器</title>
		<meta charset="utf-8" />

		<style type="text/css">
			html {
				color: red;
			}
			h1 {
				color: blue;
			}
			h2 {
				color: silver;
			}
		</style>
	</head>
	<body>
		<h1>这是 heading 1</h1>
		<h2>这是 heading 2</h2>
		<p>这是一段普通的段落。</p>
	</body>
</html>

3.2. 效果图

4. 声明分组

4.1. 我们既可以对选择器进行分组, 也可以对声明分组。

4.2. 假设您希望所有h1元素都有红色背景, 并使用28像素高的Verdana字体显示为蓝色文本, 可以写以下样式:

h1 {
    font: 28px Verdana;
}
h1 {
    color: blue;
}
h1 {
    background: red;
}

4.3. 但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反, 我们可以将声明分组在一起:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
}

004_CSS元素选择器