Is there a way to reference an existing CSS style

2019-04-18 15:43发布

站内问答 / JavaScript
489 7 6

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.

7条回答
对你真心纯属浪费
2楼-- · 2019-04-18 16:14

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人赞 添加讨论(0) 举报
走好不送
3楼-- · 2019-04-18 16:25

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人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2019-04-18 16:26

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

 .style1, .style2 { width: 140px; }
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
5楼-- · 2019-04-18 16:28

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人赞 添加讨论(0) 举报
霸刀☆藐视天下
6楼-- · 2019-04-18 16:30

Some options:

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

  2. 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人赞 添加讨论(0) 举报
beautiful°
7楼-- · 2019-04-18 16:34

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人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)