选择具有相同父级的多个类

Question

假设我有以下内容：

<div id="container">
    <div id="content">
        <span class="first"></span>
        <span class="second"></span>
    </div>
</div>

我想创建一个同时影响.first和.second的 CSS 规则。我可以执行以下操作：

#container #content .first, #container #content .second { font-weight: bold; }

但是有没有办法缩短这个时间呢？如：

#container #content .[first|second] { font-weight: bold; }

当然，在这个例子中，我没有保存太多字符，但我有过这样的真实实例，这样缩短它会很有帮助。

那么，这样的事情可能吗？我四处搜索，什么也找不到，但我希望有办法做到这一点？我猜，一种极端的方法是使用类似JavaScript的东西。

Answer 1

首先，就其本身而言，在CSS中没有办法做这样的事情，但是有一些称为CSS先行者的东西使这样的行为成为可能。使用像 LESS 或 SASS 这样的预处理器，你通常会写一些类似

 #container #content{
  /* css specific for this element */
  .first,.second{
   /* css specific for elements with class first or second contained in #container #content
  }
 }

缺点是你需要在客户端执行javascript，或者每次在服务器端更改css时运行预处理器。有几个自动化的工作流程，但这是另一个问题。

Answer 2

由于 ID 必须是唯一的，因此您可以将其简化为：

#content .first, #content .second

CSS3 提供:matches：

#content :matches(.first, .second)

但是，如您所见，它并不短！另外，它仍然是新的，所以旧的浏览器不支持它。

Answer 3

由于 ID 必须是唯一的，因此无需使用 #container #content 。

您可以使用"直接子选择器"：

#content > span

演示

Answer 4

为什么不添加另一个类？

<div id="container">
    <div id="content">
        <span class="first important"></span>
        <span class="second important"></span>
    </div>
</div>

然后使用单个选择器：

.important { font-weight: bold; }