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. 效果图