多个类/ID 和类选择器

你能发现这两个选择器之间的区别吗？

#header.callout {  }

#header .callout { }

它们看起来几乎相同，但上面那个在#header和.callout之间没有空格，而下面那个有。这个小小的差异会对它的作用产生巨大的影响。对于你们中的一些人来说，上面那个选择器可能看起来像个错误，但它实际上是一个非常有用的选择器。让我们看看它们的区别、上面那个选择器的含义，以及探索更多这种样式选择器。

以下是#header .callout的“通俗解释”

选择ID为header的元素的所有后代中，类名为callout的元素。

以下是#header.callout的“通俗解释”

选择ID为header且类名为callout的元素。

也许这张图会让它更清楚

类和ID的组合

这里重点是，可以通过将这些选择器串联在一起（不带空格），来定位具有class和ID组合的元素。

ID 和类选择器

如上所述，您可以定位具有ID和class组合的元素。

<h1 id="one" class="two">This Should Be Red</h1>

#one.two { color: red; }

双类选择器

定位具有多个class的元素。下面显示了两个class，但不限于两个。

<h1 class="three four">Double Class</h1>

.three.four { color: red; }

多个类

我们不限于此，我们可以根据需要将任意多个class和ID组合到一个选择器中。

.snippet#header.code.red { color: red; }

但请记住，这样可能会有点过头。

详细了解 如何在 DigitalOcean 中使用 ID、类和属性选择器选择 HTML 元素。

示例

那么这一切到底有多有用呢？特别是对于ID，它们本来就应该唯一，所以为什么要将它与class结合起来呢？我承认ID版本的用例比较少，但肯定有一些用途。其中之一就是轻松覆盖样式。

#header { color: red; }
#header.override { color: black; } 

第二个目标是相同的元素，但覆盖了颜色，而不是使用

.override { color: black !important }

或者可能在选择器前面加上更具体的某些内容。

更有用的是多个class，并以最近流行的“面向对象”CSS 样式使用它们。假设您在一个页面上有一堆div，并且在它们上面使用了多个不同的描述性class名称

<div class="red border box"></div>
<div class="blue border box"></div>
<div class="green border box"></div>
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>
<div class="border box"></div>

它们都共享class“box”，它可能设置宽度或背景纹理，所有这些元素共有的某些内容。然后其中一些具有颜色名称作为class，这将用于控制框内使用的颜色。也许绿色表示框具有绿色的背景和浅绿色的文本。其中一些具有class名称“border”，据推测这些将具有边框，而其余则没有。

所以让我们设置一下

.box { width: 100px; float: left; margin: 0 10px 10px 0; }
.red { color: red; background: pink; }
.blue { color: blue; background: light-blue; }
.green { color: green; background: light-green; }
.border { border: 5px solid black; }

不错，我们这里有一个很好的工具箱，我们可以创建新的框，并且有多种选择，我们可以选择颜色以及它是否具有边框，只需应用一些相当语义化的class。拥有这个class名称“toolbox”也使我们能够定位这些class的唯一组合。例如，也许那个黑色边框在红色框上不起作用，让我们修复它

.red.border { border-color: #900; }

基于 此演示页面。

特异性

这里还需要注意的是，像这样的选择器的特异性值将与它们是单独的选择器时具有相同的权重。这就是赋予它们上面示例中覆盖能力的原因。

详细了解 在 DigitalOcean 中了解 CSS 中的特异性。

浏览器兼容性

所有当前的良好浏览器都支持此功能，以及 IE 回到版本 7。IE 6 比较奇怪。它根据列表中的最后一个选择器进行选择。因此“.red.border”将根据“.border”进行选择，这有点破坏了事情。但是，如果您支持 IE 6，那么您已经习惯了这种愚蠢的行为，并且可以通过条件样式来修复它。