19

如果我定义了样式

.style1
{
   width: 140px;
}

我可以从第二种风格中引用它吗？

.style2
{
   ref: .style1;
}

或者有没有通过 javascript/jQuery 的方法？

- - 编辑

为了澄清这个问题，我试图将任何为#x 和#c 定义的样式应用于.x 和.c，而不改变CSS，因为CSS 将有我无法控制的更新。

我使用了宽度，但实际上样式会更复杂，因为指定了字体、边框和其他样式元素。

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

4

7 回答 7

14

CSS 没有办法做到这一点——这是一个经常被要求的特性，但还没有包含在规范中。你也不能直接用 JS 来做，但是有一种 hacky 的解决方法：

$('.style2').addClass ('style1');
于 2008-10-08T03:50:41.010 回答
7

您可以通过允许元素继承多种样式来实现相同的功能。前任。

<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-08T03:51:23.037 回答
5

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

 .style1, .style2 { width: 140px; }
于 2008-10-08T03:52:17.140 回答
2

另一种方法是使用预处理工具，如 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-04T01:00:29.063 回答
1

一些选项：

  1. 动态生成 CSS，无论是在运行中还是在您创作样式表时（我使用 Visual Studio 宏来实现字体、数字和颜色的常量 - 并计算颜色的浅色/深色）。该主题已在本网站的其他地方进行了很多讨论。

  2. 如果您有许多 140 像素宽的样式，并且您希望灵活地更改所有这些样式的尺寸，您可以这样做： 

    div.FixedWidth {width:140px;}
div.Style1 {whatever}
div.Style2 {whatever}

和

    <div class="Style1 FixedWidth">...</div>
    <div class="Style2 FixedWidth">...</div>
于 2008-10-08T04:14:49.933 回答
1

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

如果是这种情况，我认为您将需要遍历一个元素的计算样式，然后将它们应用于其他元素的 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 对象（第一个示例）。我也没有对上述内容进行测试，因此仅将其作为伪代码。

于 2009-05-14T19:14:24.803 回答
0

我正在尝试同样的事情并找到了这个网页（以及其他一些网页）。没有直接的方法可以做到这一点。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？）答案是肯定的。只需将“,.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-08T19:18:38.703 回答