如何将多个 css 类选择器合并为一个？

Posted 2023-03-05

【中文标题】如何将多个 css 类选择器合并为一个？

【英文标题】：how to combine multiple css class selectors into one?

【发布时间】：2014-10-12 09:57:55

【问题描述】：

我有几个选择器类，例如

.rt-grid-6 ... .largemargintop ... .rt-left ...

我必须在我的 html 中的几个元素中使用它们

样本

<div class="rt-grid-6 largemargintop rt-left">
    ...
</div>
<div class="rt-grid-6 largemargintop rt-left">
    ...
</div>
...

所以这是重复的并且难以管理，如果我必须添加或删除一个类，那么我必须更新所有出现的情况

所以我在想下面提到的 css 是否可以通过某种方式实现

.item

    rt-grid-6; //refer to the mentioned class
    largemargintop;
    rt-left;

我可以像下面的示例一样使用它们

<div class="item">
    ...
</div>
<div class="item">
    ...
</div>
...

我可以为相同的值定义一个新的 .item 类，但问题是我不能更改现有的类，同时我必须使用各自类中定义的样式。

我不能少用，因为我不能重新定义样式或访问资源。我只收到一个编译后的 css 以按原样使用。

那么有什么可能的方法可以实现我的期望吗？

按照我提到的方式可能不需要解决方案，但我想增加维护，以便更容易从单点向所需元素添加或删除类。

【问题讨论】：

你不能像在常规 CSS 中那样进行继承。看看 Less 或 SASS 或其中一种程序化 CSS 引擎，在这些引擎中，你可以做到这一点。 :)

你需要一个 CSS 预处理器，比如 LESS：lesscss.org

【参考方案1】：

只有CSS 是不可能的。您必须使用 CSS 编译器，例如 SASS 或 LESS。

可以看攻略：http://sass-lang.com/guide

SASS 的示例：

.item

    @extend .rt-grid-6; //refer to the mentioned class
    @extend .largemargintop;
    @extend .rt-left;

非常简单！

在SASS 中，您可以使用变量等等！非常好用。

【讨论】：

这看起来很棒！看来我需要安装软件。可以只做网页吗？

是的。例如，您可以使用sassmeister.com。您也可以使用SASS 框架，如Compass，它对浏览器兼容性很有用。一些框架如Symfony 与SASS 兼容以自动编译。我建议你学习SASS！ :)。 See this example!.

【参考方案2】：

由于你不能使用less或sass，你可以做的是使用一个临时的css类名并使用jQuery替换它，如下代码，

HTML

<div class="temp-class">aaaaaaaaaaaaaa</div>
<div class="temp-class">bbbbbbbbbbb</div>

JS

$(".temp-class").attr("class", "rt-grid-6 largemargintop rt-left");

Demo

【讨论】：

这是我的问题最可行的解决方案。顺便说一句，只是想知道是否可以撤消相同的操作？不只是为了我的知识。无论如何感谢您的帮助:)

你可以使用$(".temp-class").toggleClass("rt-grid-6 largemargintop rt-left");

【参考方案3】：

尝试使用 SASS / LESS 来克服这个问题。你用的不行