选择具有相同父级的多个班级答案

【问题标题】：Select multiple classes with the same parent选择具有相同父级的多个班级
【发布时间】：2014-01-10 12:27:03
【问题描述】：

假设我有以下内容：

<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 之类的东西。

【问题讨论】：

只需使用.first, .second
@brouxhaha 在这种情况下，您还可以匹配second 中不包含在#container #content 中的类实例
确实如此，但如果它们在其他 div 中有所不同，我建议使用不同的类。
我的情况假设在我想要的 DIV 之外还有其他具有相同类的元素，并且我无法更改类名。否则，我肯定会重新安排一些类和 ID 名称，以便于我。

标签： javascript css styles stylesheet rule

【解决方案1】：

首先，就其本身而言，没有办法在 CSS 中做这样的事情，但是有一些叫做 CSS prepocessors 的东西可以让这样的行为成为可能。使用像 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 或运行预处理器。有几个自动化的工作流程可以解决这个问题，但这是另一个问题。

【讨论】：

【解决方案2】：

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

#content .first, #content .second

CSS3 提供:matches:

#content :matches(.first, .second)

但是，正如您所见，它并没有更短！而且它还是新的，所以旧的浏览器不支持它。

【讨论】：

谢谢，这实际上是一个不错的选择。但是，我使用的是 Firefox，最新的发布版本还没有实现 :matches。相反，它称之为-moz-any。所以我现在可以使用它，虽然我必须记住在添加后将其更改为 :matches。
如果你添加了供应商前缀，你最终会得到更长的 CSS 选择器，而不是一开始就使用普通的东西;)

【解决方案3】：

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

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

#content > span

Demo

【讨论】：

【解决方案4】：

为什么不添加另一个类？

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

然后使用单个选择器：

.important { font-weight: bold; }

【讨论】：