如果我定义了样式
.style1
{
width: 140px;
}
我可以从第二种样式中引用它吗？
.style2
{
ref: .style1;
}
或者有没有通过 javascript/jQuery 的方法？
--- 编辑
为了澄清这个问题，我试图将任何为 #x 和 #c 定义的样式应用到 .x 和 .c 而不更改 CSS，因为 CSS 将有我无法控制的更新。
我使用了宽度，但实际上样式会更复杂，需要指定字体、边框和其他样式元素。
当样式应用于一个类时，指定多个类名确实有效，因此我会将现有响应标记为答案，但我需要将样式应用于 id 并将其应用于类样式.. 。 如果那有意义的话。
【问题讨论】：
标签： javascript jquery dynamic-css
没有办法使用 CSS 来实现 - 这是一个经常被请求的功能，但尚未包含在规范中。你也不能直接用 JS 来做，但是有一种 hacky 的解决方法：
$('.style2').addClass ('style1');
【讨论】：
您可以通过允许元素继承多种样式来实现相同的功能。例如。
<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>
【讨论】：
style="" 属性。
对多个块使用相同代码的一种方法如下：
.style1, .style2 { width: 140px; }
【讨论】：
另一种方法是使用预处理工具，例如 less 和 sass。然后在你编译完less/sass文件后，它就会变成普通的css。
// 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;
}
【讨论】：
一些选项：
动态生成 CSS，无论是在运行中还是在您创作样式表时（我使用 Visual Studio 宏来实现字体、数字和颜色的常量 - 并计算颜色）。此主题已在本网站的其他地方进行了很多讨论。
如果您有许多 140 像素宽的样式，并且您希望灵活地更改所有这些样式的尺寸，您可以这样做：
div.FixedWidth {width:140px;}
div.Style1 {whatever}
div.Style2 {whatever}
和
<div class="Style1 FixedWidth">...</div>
<div class="Style2 FixedWidth">...</div>
【讨论】：
您是说在特定元素上设置所有计算样式并将其应用到第二个元素吗？
如果是这种情况，我认为您将需要遍历一个元素的计算样式，然后将它们应用到其他元素的 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; });
我将警告上面的代码，因为我不确定 IE 是否会像 Mozilla 那样为 HTMLElement 的样式属性返回 CSSStyleDeclaration 对象（第一个示例）。我也没有给上面的测试，所以只依赖它作为伪代码。
【讨论】：
我正在尝试同样的事情并找到了这个网页（以及其他一些网页）。没有直接的方法可以做到这一点。即：
<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-then-B-then-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？）答案是肯定的。只需添加 ",.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>
【讨论】：