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

Demo

Answer 4

为什么不添加另一个类？

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

然后使用单选择器：

.important { font-weight: bold; }

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

4 个答案:

Demo