CSS选择器分组和声明分组

浏览数：24 / 时间：2015年06月09日

1）通过选择器分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

<html>
<head>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {color:blue;}
</style>
</head>

<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<h5>这是 heading 5</h5>
<h6>这是 heading 6</h6>
</body>
</html>

2）CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

<html>
<head>
<style type="text/css">
* {color:red;}
</style>
</head>

<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>

3）声明分组

对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。

<html>
<head>
<style type="text/css">
h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }
</style>
</head>

<body>
<h1>This is heading 1</h1>
</body>
</html>

下例是选择器和声明混合分组的例子：

<html>
<head>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  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>