css - 让一个 id 接受其他类的规则

Question

在 CSS 文件中，如何使具有特定 id 的元素也采用其他类的规则？

例如，这是我的 CSS 文件:

div.big
{
    width:1000px;
    height:800px;
}

div.blue
{
    background-color:blue;
}

div#big_and_blue
{
    /* What do I put here? */
}

如果我想说 id 为 big_and_blue 的 div 接受 big 和 blue 两个类的规则，这可以吗通过在 big_and_blue id 中引用这些类来完成？我当然可以手动将 big 和 blue 类的内容写到 big_and_blue id 中，但这似乎很天真。

Answer 1

单靠 CSS 无法做到这一点。在这种情况下，您需要做的是为您的 div 添加这些类以及 ID:

<div id="big_and_blue" class="blue big">

顺便说一句，您在这里所做的实质上称为“Object Oriented CSS”，这可能是一项有用的技术。我根本不会称之为天真。这可能是一种有用的策略，尤其是在由大型团队构建并将维护一段时间的大型元素中。 CSS 不是最易于维护的文件，因此有时将 CSS“切碎”成一堆可组合的类是件好事。

另请注意，“big_and_blue”描述的是对象的样式，而不是对象是什么。所以这不是一个非常实用的命名约定。我认为这是坚持使用 OOCSS 的另一个理由。

另一方面，您可以使用 CSS 预处理器来处理像这样的逻辑，例如 SASS。也就是说，如果您需要在 CSS 中的单独声明中重复样式，我认为以前使用 OOCSS 是一种更实用的解决方案。