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

分组

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

分组选择器

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

1
2
3
h2, p {
color: gray;
}

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

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

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

1
2
3
4
5
6
7
8
9
h1 {color: purple;}
h2 {color: purple;}
h3 {color: purple;}
h4 {color: purple;}
h5 {color: purple;}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 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 引入了一个新的简单选择器,称为“通用选择器”,显示为一个星号(*)。这个选择器可以匹配任何元素,就像一个通配符。例如,要让一个文档中每一个元素都为红色,样式可以这样写。

1
* {color: red;}

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

分组声明

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

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

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

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

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

1
2
3
4
5
h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}

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

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

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

1
2
3
4
h1 {
font: 18px Helvetica;
color: purple background: aqua;
}

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

分组一切

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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元素的存在:

1
document.createElement('main');

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