009_CSS分组选择器

最新推荐文章于 2025-06-04 15:58:04 发布

原创最新推荐文章于 2025-06-04 15:58:04 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文详细解读了CSS中的分组选择器，包括如何通过逗号分隔多个元素定义统一样式，以及如何组合选择器和声明来减少代码量。实例演示了如何为标题设定一致的样式。

1. 选择器的分组

1.1. 你可以对选择器进行分组, 这样, 被分组的选择器就可以分享相同的声明。将多个选择器放在规则左边, 然后用逗号分隔, 就定义了一个分组。逗号告诉浏览器, 规则中包含多个不同的选择器。

1.2. 可以将任意多个选择器分组在一起, 对此没有任何限制。

1.3. 例如, 如果您想把很多元素显示为灰色，可以使用类似如下的规则:

body, h2, p, table, th, td, pre, strong, em {
    color: gray;
}

2. 结合选择器和声明的分组

2.1. 我们可以在一个规则中结合选择器分组和声明分组, 就可以使用很少的语句定义相对复杂的样式。

2.2. 下面的规则为所有标题指定了一种复杂的样式:

h1, h2, h3, h4, h5, h6 {
  color: gray;
  background: white;
  padding: 30px;
  border: 1px solid black;
  font-family: Verdana;
}

3. 例子

3.1. 代码

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

		<style type="text/css">
			h1, h2, h3, h4, h5, h6 {
				color: gray;
				background: white;
				padding: 30px;
				border: 1px solid black;
				font-family: Verdana;
			}
		</style>
	</head>
	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<h3>This is heading 3</h3>
		<h4>This is heading 4</h4>
		<h5>This is heading 5</h5>
		<h6>This is heading 6</h6>
	</body>
</html>

3.2. 效果图