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

发布于 2024-07-06 03:46:02 字数 416 浏览 9 评论 0原文

如果我定义了一个样式，

.style1
{
   width: 140px;
}

我可以从第二个样式引用它吗？

.style2
{
   ref: .style1;
}

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

--- 编辑

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

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

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

原文

If I have a style defined

.style1
{
   width: 140px;
}

can I reference it from a second style?

.style2
{
   ref: .style1;
}

Or is there a way via javascript/jQuery?

--- Edit

To clarify the problem, I am trying to apply whatever style is defined for a #x and #c to .x and .c without altering the CSS as the CSS is going to have updates that are out of my control.

I used width but really the style would be something more complex with font, border and other style elements being specified.

Specifying multiple class names does work when the style is being applied to a class so I'll mark existing responses as answers, but I need to take the style being applied to an id and also apply it to a class style ... if that makes any sense.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

向日葵 2024-07-13 03:46:02

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

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

you can achieve the same functionality by allowing elements to inherit multiple styles. ex.

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

and then your css would include, for example:

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

edit: actually robert's answer might better approximate the method you are trying to achieve

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

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

回复收藏 0 原文

温折酒 2024-07-13 03:46:02

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

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

One way to use the same code for multiple blocks is the following:

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

回复收藏 0 原文

探春 2024-07-13 03:46:02

CSS 无法做到这一点——这是一个经常请求的功能，但尚未包含在规范中。您也不能直接使用 JS 来完成此操作，但有一种 hacky 解决方法：

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

There's no way to do it with CSS -- it's an oft-requested feature, but not included in the spec yet. You also can't do it directly with JS, but there's sort of a hacky workaround:

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

回复收藏 0 原文

指尖凝香 2024-07-13 03:46:02

一些选项：

动态生成 CSS，无论是即时生成还是在编写样式表时生成（我使用 Visual Studio 宏来实现字体、数字和颜色的常量，并计算浅色/深色色调）颜色）。这个主题已经在本网站的其他地方进行了很多讨论。
如果您有许多 140 像素宽的样式，并且您希望能够灵活地更改所有这些样式的尺寸，则可以执行以下操作：
```
div.FixedWidth {宽度：140px;} 
  div.Style1 {随便} 
  div.Style2 {随便} 
  
```

：

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

Some options:

Generate your CSS dynamically, either on the fly or as you're authoring your style sheets (I use a Visual Studio macros to implement constants for fonts, numbers, and colors - and to calculate light/dark tints of colors). This topic has been much discussed elsewhere on this site.
If you have a number of styles that are 140px wide and you want to have the flexibility of changing that dimension for all of those styles, you could do this:
```
div.FixedWidth {width:140px;}
div.Style1 {whatever}
div.Style2 {whatever}
```

and

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

回复收藏 0 原文

不念旧人 2024-07-13 03:46:02

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

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

Are you talking about getting all of the computed styles set on a particular Element and applying those to a second Element?

If that's the case, I think you're going to need to iterate through one Element's computed styles using and then apply those to your other Elements' cssText properties to set them as inline styles.

Something like:

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

If you know that you'll only be dealing with a finite set of CSS properties, you could simplify the above as:

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

I'll caveat the above code with the fact that I'm not sure whether or not the IEs will return a CSSStyleDeclaration Object for an HTMLElement's style property like Mozilla will (the first example). I also haven't given the above a test, so rely on it as pseudo-code only.

回复收藏 0 原文

携君以终年 2024-07-13 03:46:02

我正在尝试同样的事情并找到了这个网页（以及其他一些网页）。没有直接的方法可以做到这一点。 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>

I was trying this same thing and found this webpage (as well as some others). There isn't a DIRECT way to do this. 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>

Does NOT work. The problem here is you (like me) are trying to do things in a logical fashion. (ie: A-then-B-then-C)

As others have pointed out - this just does not work. Although it SHOULD work and CSS SHOULD have a lot of other features too. It doesn't so you have to do a work around. Some have already posted the jQuery way to get around this but what you want CAN be achieved with a slight modification.

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

This achieves the same effect - just in a different way. Instead of trying to assign "a" or "b" to "c" - just assign "c" to "a" or "b". You get the same effect without it affecting the rest of your code.

The next question that should pop into your mind is "Can I do this for multiple CSS items. (Like font-size, font-weight, font-family?) The answer is YES. Just add the ",.c" part onto each of the things you want it to be a part of and all of those "parts" will become a part of ".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>

回复收藏 0 原文

久光 2024-07-13 03:46:02

另一种方法是使用预处理工具，例如 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;
}

Another way is use pre -processing tool, like less and sass. Then after you compile the less/sass file, it will result as normal css.

Here is the documentation of less and 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;
}

回复收藏 0 原文

~没有更多了~