Question

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

我的意思是：

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

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

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

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

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

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

Answer 1

在标准CSS中进行评论是不可能的，因为没有纯粹的继承。

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

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

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

    <span class="class2" />

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

如果您不想使用JS，那么您需要使用SASS或类似的东西来“编译”CSS。

Answer 2

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

您的选择包括：

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

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

.nav {
    display: inline-block;
}

在单个元素上使用多个类

.menu {
     font-weight: bold;
}

.nav {
     display: inline-block;
}

<li class="menu nav">

以编程方式生成CSS

例如，使用SASS

@mixin menu {
    font-weight: bold;
}

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

Answer 3

是的，它是可以的。

写：

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

More info here.

Answer 4

另一个选择是使用LESS来执行此操作。这是一个非常好的工具，可以对CSS开发做一些改进。

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

Answer 5

最好的方法是重新声明class1正好位于您的自定义CSS结尾之下，并使用您要查找的值覆盖它。这样，您无法更改的继承值+您需要合并的值都将适用。

Answer 6

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

无法更改html
无法更改定义.class1。
您可以更改定义.class2。

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

第一步：简化CSS

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

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

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

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

在定义.less的{{1}}文件中执行此操作：

.class2

您正在导入之前已转换为less的css文件作为参考。这可以防止您获得@import (reference) /path/to/your/CSStoLESS.less; .class2 { .class1; }或原始css文件中包含的任何其他内容的重复选择器。现在，您可以使用.class1包含，就像您在问题中显示的那样，使.class1的属性成为.class1的属性。

可能仅此一点有效：

.class2

我不知道的是@import (reference) /path/to/your/your-css-defining-class1.css; .class2 { .class1; }包含是否也默认使(reference)成为LESS代码，例如第一步中的.css包含类型转换。我需要更多地研究这个问题。如果是这样，那么这是一步，而不是两步。

Answer 7

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

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

它会对你有用

此外，如果你想在class2中再做一些广告，那么你可以定义它

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

Answer 8

我假设你想要.class1中的任何内容以及.class2

中的一些额外属性

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

<span class="class1 class2" />

另一种是在设置属性

时命名两个类

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

.class2{/*extra properties here*/}

Answer 9

其他人提到了 SASS 和 LESS。这是 Stylus 的解决方案：

.class1
  text-indent: 100

.class2
  @extend .class1

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

9 个答案: