javascript - 选择具有相同父类的多个类

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 prepocessor 的东西可以使这种行为成为可能。使用像 LESS 这样的预处理器或 SASS你通常会按照以下方式写一些东西

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

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