有沒有辦法使用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樣式？

回答

相關問題