jQuery 如何在不复制的情况下在另一个类中重用css类内容？

How to reuse css class content in another class without copying?

提问by Tony

Is it possible to use existing css class as content in another class ?

是否可以将现有的 css 类用作另一个类中的内容？

I mean something like:

我的意思是这样的：

Contained in some library:
.class1 { text-indent: 100 }

 I can not change this:
 <span class="class2" />

The definition for class2 is also contained in another library. So I could not change it directly.

class2 的定义也包含在另一个库中。所以我不能直接改变它。

But I want to do something like that in my CSS file:
.class2 { .class1 }

I know it is not possible in that form. But maybe one can use some trick to achieve the behaviour without copying of the content of class1? I need this because I want to redefine class with content from another CSS class. Our project use JQuery as well, but I would do it rather with CSS.

我知道这种形式是不可能的。但也许可以使用一些技巧来实现不复制内容的行为class1？我需要这个，因为我想用另一个 CSS 类的内容重新定义类。我们的项目也使用 JQuery，但我更愿意使用 CSS。

EDIT: I should explain more, I could not change how .class1 is defined, because this class is in a library, and I could not change mark up on span class.

编辑：我应该解释更多，我无法更改 .class1 的定义方式，因为这个类在一个库中，我无法更改 span 类的标记。

回答by Chexpir

It is imposible to do in standard CSS what you are commenting, as there is not pure inheritance.

不可能在标准 CSS 中执行您正在评论的内容，因为没有纯继承。

Despite it doesn't apply with your code restrictions, this is the closer way to do it:

尽管它不适用于您的代码限制，但这是更接近的方法：

    .class1, .class2 { text-indent: 100 }

    .class2 { 
            /* Styles you want to have only in class 2 */
    }

    <span class="class2" />

On the other hand, as @A. Wolff has pointed out, you can still use js/jq to add class to specific elements: $(function(){$('.class2').addClass('class1')}); Then just set a specifc CSS rule for these elements.

另一方面，作为@A。Wolff 指出，您仍然可以使用 js/jq 为特定元素添加类： $(function(){$('.class2').addClass('class1')}); 然后只需为这些元素设置一个特定的 CSS 规则。

In case you don't want to use JS, for something like that you'd need to use SASS or similar, which "compiles" to CSS.

如果你不想使用 JS，对于类似的东西，你需要使用 SASS 或类似的东西，它“编译”成 CSS。

回答by Quentin

CSS has no means to reference one rule-set from another.

CSS 无法从另一个规则集引用一个规则集。

Your options include:

您的选择包括：

Using multiple selectors for things with common rules

对具有共同规则的事物使用多个选择器

.menu,
.nav {
    font-weight: bold;
}

.nav {
    display: inline-block;
}

---

---

Using multiple classes on a single element

在单个元素上使用多个类

.menu {
     font-weight: bold;
}

.nav {
     display: inline-block;
}

<li class="menu nav">

---

---

Generating your CSS programatically

以编程方式生成 CSS

For example, with SASS

例如，使用SASS

@mixin menu {
    font-weight: bold;
}

.nav {
    display: inline-block;
    @include menu;
}

回答by Hiral

Yes, it is possoble.

是的，这是可能的。

Write:

写：

.class1,.class2 {text-indent:100;}
.class1{color:red;}
.class2{font-size:30px;}

More info here.

更多信息在这里。

回答by Wellington Zanelli

Another option is to use LESSto do this. It's a very good tool and do some improvements to your CSS development.

另一种选择是使用LESS来做到这一点。这是一个非常好的工具，可以对您的 CSS 开发进行一些改进。

Take a look at theirs documentation, it's very nice. About the compilers, I use Koalaand recommend it.

看看他们的文档，非常好。关于编译器，我使用Koala并推荐它。

回答by Nitesh

The best way would be to redeclare class1just below your custom css ends and override it with the values that you are looking for. This way, the inherited values, that you cannot change + the values that you need to incorporate, both shall apply.

最好的方法是class1在您的自定义 css 结束下方重新声明并使用您正在寻找的值覆盖它。这样，您无法更改的继承值 + 需要合并的值都应适用。

回答by ScottS

You mentioned in one comment that you cannot use LESS, but I think perhaps you misunderstand how LESS (or another preprocessor) could help you. That is, you have not given any reason that I can see why you cannot use it (even in your update). As I understand your problem, you have the following parameters:

您在一条评论中提到您不能使用 LESS，但我认为您可能误解了 LESS（或其他预处理器）如何帮助您。也就是说，您没有给出任何理由让我明白为什么您不能使用它（即使在您的更新中）。据我了解您的问题，您有以下参数：

1. Cannot change html
2. Cannot change the css file that defines .class1.
3. You can change the css file that defines .class2.

1. 无法更改 html
2. 无法更改定义 .css 的 css 文件.class1。
3. 您可以更改定义 .css 的 css 文件.class2。

If the above is correct, then here is how you use LESS (version 1.5+). You make your file defining .class2a .lessfile. Then, to keep it clean, I believe you are going to have to do a two step process (it may be you can do step 2 without step 1).

如果以上是正确的，那么这里是你如何使用 LESS（1.5+ 版）。你让你的文件定义.class2一个.less文件。然后，为了保持清洁，我相信您将不得不执行两步过程（可能您可以在没有步骤 1 的情况下进行步骤 2）。

Step One: Make the CSS into LESS

第一步：使 CSS 变成 LESS

Create a file, let's say CSStoLESS.lessand put this in it:

创建一个文件，让我们说CSStoLESS.less并将其放入其中：

@import (less) /path/to/your/your-css-defining-class1.css;

This will import the css and make the processor consider it as LESS code. It is possible that the next step does that as well, I have not had opportunity to test it out.

这将导入 css 并使处理器将其视为 LESS 代码。下一步也可能会这样做，我还没有机会对其进行测试。

Step Two: Use that file as reference in your LESS

第二步：在你的 LESS 中使用该文件作为参考

By doing this in your .lessfile defining .class2:

通过在您的.less文件中定义.class2：

@import (reference) /path/to/your/CSStoLESS.less;

.class2 { .class1; }

You are importing the previous css file that has been converted to less as reference only. This prevents you from getting duplicate selectors for .class1or anything else contained in your original css file. Now you can use an inclusion of .class1just like you show in your question to make the properties of .class1become that of .class2.

您正在导入之前已转换为 less 的 css 文件，仅供参考。这可以防止您获得.class1原始 css 文件中包含的任何其他内容的重复选择器。现在，您可以.class1像您在问题中所展示的那样使用包含来使 的属性.class1成为的属性.class2。

It may be that this alone works:

可能仅此而已：

@import (reference) /path/to/your/your-css-defining-class1.css;

.class2 { .class1; }

What I don't know is if the (reference)inclusion also defaults to making .cssinto LESS code like the (less)inclusion typecasting does in step one. I need to research this out more. If so, then it is a one-step, not a two-step process.

我不知道的是，(reference)包含是否也默认.css生成 LESS 代码，就像(less)第一步中的包含类型转换那样。我需要更多地研究这个。如果是这样，那么它是一个一步，而不是一个两步过程。

回答by Gabriele Petrioli

I am assuming you want whatever is in .class1plus some extra properties in .class2

我假设你想要任何东西.class1加上一些额外的属性.class2

One way is to simply apply both classes to the element you want..

一种方法是简单地将这两个类应用于您想要的元素。

<span class="class1 class2" />

another is to name both classes when setting the properties

另一个是在设置属性时命名两个类

.class1, .class2 {text-indent: 100}

.class2{/*extra properties here*/}

回答by nrsharma

You can define 2 classes in this way

您可以通过这种方式定义 2 个类

.class1, .class2 { text-indent: 100 }

And it will work for you

它会为你工作

Moreover if you want to ad some more in class2 then you can define it

此外，如果您想在 class2 中添加更多广告，则可以定义它

.class2 { /*whatever you want here*/ }