有没有办法使用CSS或JavaScript从另一个CSS样式引用现有的CSS样式？

如果我有一个样式定义有没有办法使用CSS或JavaScript从另一个CSS样式引用现有的CSS样式？

.style1 
{ 
    width: 140px; 
}

我可以从第二个样式参考呢？

.style2 
{ 
    ref: .style1; 
}

或者有没有办法通过JavaScript/jQuery？

---编辑

为了澄清这个问题，我想申请什么风格的＃X，和#C到.X和.C定义不改变CSS的CSS将不得不无法控制的更新。

我用宽度，但真正的风格会更复杂的字体，边框和其他风格元素被指定。

当样式应用于类时，指定多个类名确实有效，因此我将现有的响应标记为答案，但我需要将样式应用于一个id并将其应用于类样式。 .. 如果那有意义的话。

来源

2008-10-08 JTew

有没有办法用CSS做 - 它是一个经常要求的功能，但尚未包含在规范中。您也不能与JS直接做，而是有某种哈克变通方法：

$('.style2').addClass ('style1');

来源

2008-10-08 03:50:41

狡计:)我喜欢你的思考方式：） – 2013-07-01 12:46:48

您可以通过允许元素继承多种风格实现相同的功能。恩。

<p class="style1 style2">stuff</p>

，然后你的CSS将包括，例如：

.style1 {width:140px;} 
.style2 {height:140px;}

编辑：实际上罗伯特的回答可能更接近您所想达到

.style1, .style2 {width: 140px;} 
.style2 {height: 140px;} 

<p class="style2">i will have both width and height applied</p>

来源

2008-10-08 03:51:23 Owen

这种风格很不幸融合了风格和表现方式 - 如果你打算在你的标记中加入特定于风格的信息，可能只需添加`style =“”`属性 – 2008-10-08 04:39:24

John的答案更接近我想要的实现，我将更多地使用jQuery来看看是否有办法确切地做我需要的东西。 – JTew 2008-10-08 20:05:31

一种方法使用的方法多块的相同代码如下：

.style1, .style2 { width: 140px; }

来源

2008-10-08 03:52:17

一些选项：

生成你的CSS动态，无论是在飞行中或作为你创作样式表（我用的是Visual Studio的宏来实现对字体，数字和颜色常数 - 和计算颜色的浅色/深色）。这个主题已经在这个网站的其他地方讨论过了。
如果你有一些款式是140px宽，你想有改变所有的这些风格，尺寸的灵活性，你可以这样做：
```
div.FixedWidth {width:140px;} 
div.Style1 {whatever} 
div.Style2 {whatever} 
```

和

<div class="Style1 FixedWidth">...</div> 
    <div class="Style2 FixedWidth">...</div>

来源

2008-10-08 04:14:49

您是否在谈论如何获取在特定元素上设置的所有计算样式并将其应用于第二个元素？

如果是这样的话，我认为你需要遍历一个Element的计算样式，然后将它们应用到其他Elements的cssText属性中，以将它们设置为内联样式。

喜欢的东西：

el = document.getElementById('someId'); 
var cStyle = ''; 
for(var i in el.style){ 
    if(el.style[i].length > 0){ cStyle += i + ':' + el.style[i] + ';'; 
} 
$('.someClass').each(function(){ this.style.cssText = cStyle; });

如果你知道你将只处理一组有限的CSS属性，你可以简化上述为：

el = $('#someId'); 
var styleProps = {'border-top':true,'width':true,'height':true}; 
var cStyle = ''; 
for(var i in styleProps){ 
    cStyle += styleProps[i] + ':' + el.style(styleProps[i]) + ';'; 
} 
$('.someClass').each(function(){ this.style.cssText = cStyle; });

我会包退上面的代码与我不确定IEs是否会返回CSSMtyleDeclaration对象，像Mozilla这样的HTMLElement风格属性（第一个示例）。我也没有给出上述测试，所以只能依靠它作为伪代码。

来源

2009-05-14 19:14:24 ajm

另一种方式是使用预处理工具，如less和sass。然后，在编译less/sass文件后，它将以普通的css结果。

以下是less和sass的文档。

// example of LESS 

#header { 
h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
p { font-size: 12px; 
    a { text-decoration: none; 
    &:hover { border-width: 1px } 
    } 
    } 
} 


/* Compiled CSS */ 

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
border-width: 1px; 
}

来源

2013-10-04 01:00:29 joydesigner

我正在尝试这个相同的事情，发现这个网页（以及其他一些）。没有直接的方法来做到这一点。 IE：

<html><head><title>Test</title><style> 
.a { font-size: 12pt; } 
.b { font-size: 24pt; } 
.c { b } 
</style></head><body> 
<span class='c'>This is a test</span></body></html>

是否不工作。这里的问题是你（像我）试图以合理的方式做事。（即：A然后B然后C）

正如其他人指出的 - 这是行不通的。虽然它应该工作，CSS也应该有很多其他功能。这并不是你必须要做的。有些人已经发布了jQuery的方式来解决这个问题，但是只需稍作修改即可实现你想要的功能。

<html><head><title>Test</title><style> 
.a { font-size: 12pt; } 
.b,.c { font-size: 24pt; } 
</style></head><body> 
<span class='c'>This is a test</span></body></html>

这实现了相同的效果 - 只是以不同的方式。不要试图将“a”或“b”分配给“c” - 只需将“c”分配给“a”或“b”。你会得到相同的效果，而不会影响其他代码。你应该想到的下一个问题是“我可以为多个CSS项目做这个吗？（像font-size，font-weight，font-family？）答案是YES，只需添加”，“。 C“部分到每一个你希望它成为的一部分，所有这些事情‘零件’将成为一部分” .c”的

<html> 
<head> 
<title>Test</title> 
<style> 
.a { font-size: 12pt; } 
.b,.c { font-size: 24pt; } 
.d { font-weight: normal; } 
.e,.c { font-weight: bold; } 
.f { font-family: times; } 
.g,.c { font-family: Arial; } 
</style> 
</head> 
<body> 
<span class='c'>This is a test</span> 
</body> 
</html>

来源

2015-05-08 19:18:38

有没有办法使用CSS或JavaScript从另一个CSS样式引用现有的CSS样式？

回答

相关问题