2008-12-11 92 views
2

有沒有方法可以爲類組合定義樣式?例如,我想我的HTML看起來像這樣,但輸出到適當的色彩渲染:爲類組合定義樣式

<span class="red">Red Text</span><br/> 
<span class="green">Green Text</span><br/> 
<span class="red green">Yellow Text</span><br/> 

編輯:上面似乎是混亂的人時,這只是一個例子;所以這裏是另外一個例子:

<style> 
    .style1 { background-color: #fff; } 
    .style2 { background-color: #eee; } 
    .style1.highlight { color: red; } 
    .style2.highlight { color: blue; } 
</style> 

<ul> 
    <li class="action style1">Do Action 1</li> 
    <li class="action style2">Do Action 2</li> 
    <li class="action style1 highlight">Do Action 1</li> 
    <li class="action style2 highlight">Do Action 2</li> 
</ul> 

<script language="javascript" type="text/javascript"> 
$("li.action").bind("click", function(e) { 
    e.preventDefault(); 

    // Do some stuff 

    $(this).addClass("highlight"); 
    $(this).unbind("click"); 
}); 
</script> 

同樣,這僅僅是一個例子,所以不要在交替的元件或類似的東西掛了。我試圖避免的是必須複製每個不同styleN的綁定函數,或者必須編寫一個檢查每個styleN類的elseif結構。不幸的是,這個代碼在IE 6或7中不起作用 - .style1和.style2元素的高亮文本最終變爲藍色。

回答

9

您可以在多個類別中進行選擇:

span.red.green { color: yellow; } 

這將適用於紅色和綠色班班任何span元素。這可能不是你想要的,因爲它也將適用於,說:

<span class="red green blue">white</span> 

請注意,這不就在IE 6

+0

嗯......在IE7中似乎也沒有工作(綠色跨度是黃色的),這是一種交易斷路器。 – Soldarnal 2008-12-11 19:05:18

+0

IE將此解析爲OR不是AND - 即它將匹配具有「綠色」類的任何元素。你可以用正確的設計來解決這個問題,但並非總是如此。如果你能給我們一個特定的目標,我們可能能夠解決這個問題。 – annakata 2008-12-11 20:53:49

-1

也許這樣的事情

.red 
{ 
color: red; 
} 

.red_green 
{ 
color: #AS8324; 
} 
工作

,你可以用你的HTML代碼

<span class="red">Red Text</span><br/> 
<span class="green">Green Text</span><br/> 
<span class="red_green">Yellow Text</span><br/> 

我不知道這是你到底想要什麼,但這個是我APPR oach。我希望它有幫助。

+1

這與創建黃色課程一樣好。 – 2008-12-11 18:55:08

4

當然。

.red { color: red; } 
.green { color: green; } 
.red.green { color: yellow; } 
0

你能做到這一點使用Javascript,但我會更好只是爲了創造一個黃色類,如果你有興趣到JavaScript方法請評論(我需要考慮一下了,它會更有效只是爲了在你的邏輯層中做到這一點)

編輯 | 更Edit(對於當前顏色添加正則表達式)
好吧,你不感興趣,但我還是會寫它,因爲它看起來很有趣:

 
var re = /([0-9]?)/g; 
$("span").each(function(){ 
$this = $(this); 
results = re.exec($this.css('background-color')); // background is something like: 'rgb(0, 132, 12)' 
var sRed = results[1]; 
var sGreen = results[2]; 
var sBlue = results[3]; 
/* OLD! 
var sRed = '0'; 
var sGreen = '0'; 
var sBlue = '0';*/ 
if($this.hasClass('red')) { sRed = '255'; } 
if($this.hasClass('green')) { sGreen = '255'; } 
if($this.hasClass('blue')) { sBlue = '255'; } 
$this.css('background-color', 'rgb(' + sRed + ',' + sGreen + ',' + sBlue ')'; 
}); 

您需要的jQuery爲,雖然你可能可以做到沒有jQuery。

+0

非常好!不幸的是,我實際上並不想用顏色去做任何事情;這只是我用過的例子。 – Soldarnal 2008-12-11 19:29:07

0

你爲什麼要這樣做?這可能是可能的,但我沒有看到好處。你還會定義class =「short fat」和class =「tall thin」,還是class =「light dark」?爲了清晰和重用,類應該簡單明確。如果沒有必要且可能引起混淆,應避免多重繼承(假或其他)。

class="red green" 

是混淆

class="yellow" 

簡潔明瞭

編輯:我看到了第二個例子,我的建議保持不變。一門課簡潔明瞭,兩門可能令人困惑。假設這應該起作用(並且我認爲是這樣),那麼在最流行的瀏覽器(IE)中花大力氣去對付錯誤可能是不值得的。

0

這裏是我的解決方法:

<style> 
    .style1 { background-color: #fff; } 
    .style2 { background-color: #eee; } 
    .style1 .highlight { color: red; } 
    .style2 .highlight { color: blue; } 
</style> 

<ul> 
    <li class="action style1"><span>Do Action 1</span></li> 
    <li class="action style2"><span>Do Action 2</span></li> 
    <li class="action style1"><span class="highlight">Do Action 1</span></li> 
    <li class="action style2"><span class="highlight">Do Action 2</span></li> 
</ul> 

<script language="javascript" type="text/javascript"> 
$("li.action").bind("click", function(e) { 
    e.preventDefault(); 

    // Do some stuff 

    $(this).children("span").addClass("highlight"); 
    $(this).unbind("click"); 
}); 
</script> 

它並不像我所希望的優雅。它爲每個項目使用一個額外的元素;但至少它仍然很乾淨。