如何在不复制的情况下在另一个类中重用CSS类内容？|jquery问答

是否可以将现有的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类的标记。

由于没有纯继承，因此无法在标准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。

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

是的，可能。

写：

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

更多信息在这里。

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

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

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

无法更改HTML
无法更改定义的CSS文件.class1。
您可以更改定义的css文件.class2。

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

第一步：将CSS转换为LESS

假设创建一个文件CSStoLESS.less并将其放入其中：

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

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

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

通过在您的.less文件中定义以下内容.class2：

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

.class2 { .class1; }

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

可能仅此一项有效：

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

.class2 { .class1; }

我不知道的是，(reference)包含是否默认也.css像(less)步骤1中的包含类型转换那样默认制作为LESS代码。我需要对此进行更多研究。如果是这样，则它是一个步骤，而不是两个步骤。

最好的方法是class1在自定义css端下方重新声明并用您要查找的值覆盖它。这样，不能更改的继承值+需要合并的值都将适用。

我假设你想要什么，.class1再加上一些额外的属性.class2

一种方法是简单地将两个类都应用于所需的元素。

<span class="class1 class2" />

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

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

.class2{/*extra properties here*/}

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

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

它会为你工作

此外，如果您想在第2类中投放更多内容，则可以对其进行定义

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

本文地址：http://jquery.askforanswer.com/ruhezaibufuzhideqingkuangxiazailingyigeleizhongzhongyongcssleineirong.html
文章标签：css , html , jquery
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

文件下载