是否可以将现有的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*/ }
文章标签:css , html , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!