CSS 多类选择器一个class值可以包含一个词列表

在编程世界中深潜久了，就会发现自己的无知如海洋般深邃。我曾经以为自己已经掌握了HTML和CSS的基础，可以游刃有余地驾驭它们，事实并非如此。实际上，我还有很多需要学习和的领域。

平时，我很少使用某些特殊的CSS写法，比如 `.a.b{display:block;}` 这种双类选择器。当我上网查找资料时，才发现其中蕴含的知识是如此丰富。在HTML中，一个class值可以包含多个词汇，这些词汇之间用空格隔开。例如，如果你想将一个特定的元素同时标记为“重要”和“警告”，可以这样写：

This paragraph is a very important warning.

假设所有带有“important”类的元素都是粗体，所有带有“warning”类的元素都是斜体，而同时带有“important”和“warning”的所有元素还有一个银色的背景。我们可以这样定义CSS样式：

```css

.important {

font-weight: bold;

}

.warning {

font-style: italic;

}

.important.warning {

background: silver;

}

```

通过链接两个类选择器，我们可以选择同时包含这些类名的元素，无论它们的顺序如何。如果一个多类选择器包含不在类名列表中的类名，那么匹配就会失败。例如，狼蚁网站的SEO优化规则就是这样定义的：`.important.urgent {background:silver;}`。这个选择器只会匹配class属性中包含“important”和“urgent”的p元素。如果一个p元素的class属性只有“important”和“warning”，它将无法匹配。它可以匹配以下元素：

This paragraph is a very important, urgent, and warning message.