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

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;}

更多信息在这里.