《CSS权威指南4》- Chapter2.2 - 分组

分组

迄今为止，我们已经学习了将单个样式应用于单个选择器这种相当简单的技术。但是如果想要向多个元素应用同一个样式？如果是这样的话，则需要使用多个选择器，或者向一个或一组元素应用多个样式。

分组选择器

假设希望h2和p元素文本都是灰色。最简单的实现方式是使用以下声明：

h2, p {
    color: gray;
}

将 h2和p选择器放在规则的左边，并使用逗号分隔，右边是样式（color：gray;）应用于两个选择器所指的元素,这样就定义了一个规则。逗号告诉浏览器，在该规则中涉及到两个不同的选择器。去掉逗号，会给这个规则带来完全不同的含义，我们将在“后代选择器”中对此进行讨论。
实际上，将多少个选择器组合在一起是没有限制的，例如，想要显示大量的灰色元素，可以使用如下规则：

body, table, th, td, h1, h2, h4, h5, p, pre, strong, em, b, i {
    color: gray;
}

分组允许作者极大的压缩某些类型的样式，这样可得到一个更简单的样式表。以下的两组可选规则，产生相同的结果，但是可以很清楚的看出还一个更容易书写。

h1 {color: purple;}
h2 {color: purple;}
h3 {color: purple;}
h4 {color: purple;}
h5 {color: purple;}

h1, h2, h3, h4, h5 {
    color: purple;
}

分组也允许一些有趣的选择。例如，以下例子中所有的规则分组都是等价的。每一个组仅展示了对选择器和声明 分组的不同方式。

/* group 1 */
h1 {color: silver; background: white;}
h2 {color: silver; background: gray;}
h3 {color: white; background: grey;}
h4 {color: silver; background: white;}
b {color: gray; background: white;}


/* group 2 */
h1, h2, h4 {color: silver;}
h3 {color: white;}
b {color: gray;}
h1, h4, b {background: white;}
h2, h3 {background: gray;}

/* group 3 */
h1, h4 {color: silver; background: white;}
h2, h3 {background: gray;}
h2 {color: silver;}
h3 {color: white;}
b {color: gray; background: white;}

通用选择器

CSS2 引入了一个新的简单选择器，称为“通用选择器”，显示为一个星号（*）。这个选择器可以匹配任何元素，就像一个通配符。例如，要让一个文档中每一个元素都为红色，样式可以这样写。

* {color: red;}

这个声明相当于一个分组选择器，它列出文档中包含的每个元素，通用选择器只需敲击键盘一次，就能把文档中所有元素的 color 属性赋值为 red。 但是，要注意：虽然通用选择器很方便，但是它的特性是 0-0-0；由于它的目标是其声明范围内的所有内容，因此它可能产生意想不到的结果，本书稍后对此进行讨论。

分组声明

由于可以将选择器组合成单个规则，因此也可以对声明进行分组。假设你想要所有的h1元素的都呈现为紫色、高 18 像素、Helvetica 字体、浅绿色背景。可以这样编写样式：

h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}

但是这种方法是低效率的，想象一下，为一个包含 10 或 15 个样式的元素创建这样一个列表！可以把声明放在一起来替代它。

h1 { font: 18px Helvetica; color: purple; background: aqua;}

这将产生与以上展示的三行样式完全相同的效果。
注意,在 对每个声明进行分组时，在其末尾使用分号是至关重要的。浏览器忽略样式表中的空白，因此用户代理必须依赖正确的语法来解析样式表。可以大胆的格式化样式如下：

h1 {
    font: 18px Helvetica;
    color: purple;
    background: aqua;
}

也可以最小化 CSS，删除所有不需要的空格。

h1{font:18px Helvetica;color:purple;background:aqua;}

忽略空白，最后一个也会被服务器平等对待，但是第二个最易读的，也是在开发过程中编写 CSS 的推荐方法。处于网络性能的考虑，你可能会选择最小化 CSS，但这通常是由服务端脚本、缓存网络或其他服务来处理的。
如果第二个声明省略了分号，用户代理对样式表的解释如下：

h1 {
    font: 18px Helvetica;
    color: purple background: aqua;
}

因为background:不是color的有效值，而且color只能有一个关键字，所有用户代理将完全忽略color声明（包括background: aqua;部分）。你可能以为浏览器至少会把h1元素渲染成没有浅绿色背景的紫色文本，但事实并非如此。相反，color将是默认的颜色（通常是黑色）,banckground是透明的（transparent，也是默认的）。声明font: 18px Helvetica仍然有效，因为它是用分号正确结束的。
与选择器分组一样，声明分组是保持样式表简短、富有表现力、易于维护的一种便利方式。

分组一切

现在你知道可以对选择器、声明进行分组。通过在单个规则中结合这两种类型的分组，可以仅使用几个语句来定义非常复杂的样式。现在，如果你想给文档中所有的标题分配一些复杂的样式，并且希望对所有的标题应用相同的样式，该怎么办？具体做法如下：

h1, h2, h3, h4, h5, h6 {
    color: gray;
    background: white;
    padding: 0,5em;
    border: 1px solid black;
    font-family: Charcoal, sans-serif;
}

这里我们将选择器分组，因此规则右侧的样式将应用于列出的所有标题。声明分组意为着所有列出的规则将应用于规则左侧的选择器。
这种方法比冗长的替代方法更可取，后者的开头是这样的：

h1 {color: gray;}
h2 {color: gray;}
h3 {color: gray;}
h4 {color: gray;}
h5 {color: gray;}
h6 {color: gray;}

h1 {background: white;}
h2 {background: white;}
h3 {background: white;}
h4 {background: white;}
...

并继续许多行。你可以编写这样长的样式，但不建议使用。因为在编辑更改时，它们江河到处使用的样式属性一样繁琐乏味。
可以向选择器添加更多的表达式，并以一种有利于信息类型的元素间切换的方式来应用样式。想要得到如此强大的功能，需要先做些准备工作，但这是非常值得的。

新元素在老旧的浏览器

随着 HTML 的更新，如 HTML5 规范，新的元素已经出现。有一些浏览器比这些新元素更早，所以不能识别它们。比如，IE9 之前的 ie 版本，不支持选择它们不理解的元素，解决方案是在 DOM 中创建该元素，从而告知浏览器该元素存在。
例如， IE8 不能识别<main>元素，一些 JavaScript 将告知main元素的存在:

document.createElement('main');

通过运行这行代码，旧版本的 IE 将识别元素的存在，从而允许对其进行选择和样式。