在CSS选择器中使用OR

Question

我有一个元素在多个页面上出现，我想根据它所在的高级div的类别对其进行不同的样式设置。例如，如果我想根据“类型”更改我的徽标颜色，则这些类型可以分组（因此typeA、typeB和typeC应该使用一种颜色，而typeD和typeE应该使用另一种颜色）。另外，作为高级div，这些类型也用于其他事物，因此不能合并。

.typeA #logo,
.typeB #logo,
.typeC #logo{
color: #ffffff;
}

.typeD #logo,
.typeE #logo,{
color: #000000;
}

有没有一种方法可以使用某个选择器链接起来，这样我就不必让代码看起来那么丑陋。这个示例很小，但真实世界的版本涉及更多类型。是否有一种方法可以做到像这样：

.typeA || .typeB || .typeC #logo{
color: #ffffff;
}

- deadroxy

---

这将是CSS选择器的史诗级变革。我希望你能够做到 (.typeA|.typeB|.typeC) #logo { color: #ffffff; }。 - redbmk

Answer 1

正如其他人所说，CSS不支持那种类型的分组。

如果你可以控制你的标记，为什么不给每个类型类添加一个共同的类，然后选择该共同的类呢？

例如：

<div class="typeA type1">
    <span id="logo">Site Title</span>
</div>

<div class="typeD type2">
    <span id="logo">Site Title</span>
</div>

.type1 #logo { color: #ffffff; }
.type2 #logo { color: #000000; }

- BoltClock

---

只要不需要支持IE 6，这就是正确的方法。 - Jonathan Fingland

@Jonathan Fingland：只要您不在单个选择器中链接多个类别，IE6就支持多个类别；只针对其中一个。 - BoltClock

谢谢大家的回答。我怀疑我提出的方法是行不通的，但我想要确认一下。我已经实现了我想要做的事情，只是CSS有点臃肿（但只能通过增加HTML的复杂度来清理它 - 而我更愿意保持HTML的简洁）。不过还是感谢大家的快速回应！ - deadroxy

不客气！我尽量在我的标记和样式表之间取得平衡。 - BoltClock

Answer 2

简而言之：不行。

有像LESS这样的系统可以实现这一点，但渲染后的CSS仍将看起来像您的第一个示例。

- Jonathan Fingland

Answer 3

抱歉，没有直接的CSS可以做到这一点。不过有一些项目，比如http://sass-lang.com/，需要外部编译器才能实现你想要的效果。

- user578895

Answer 4

使用纯CSS是不可能实现这个的。但是可以使用像SASS这样的元语言来完成。请查看http://sass-lang.com/获取更多信息。

- Matijs

Answer 5

我不知道CSS中是否有“或”的用法。您可以使用另一种选择器，例如父类型为A、B和C的“containerA”或“containerB”。

- clark