为类组合定义样式

Question

有没有方法可以为类组合定义样式？例如，我想我的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元素的高亮文本最终变为蓝色。

Answer 1

您可以在多个类别中进行选择：

span.red.green { color: yellow; } 

这将适用于红色和绿色班班任何span元素。这可能不是你想要的，因为它也将适用于，说：

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

请注意，这不就在IE 6

Answer 2

也许这样的事情

.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。我希望它有帮助。

Answer 3

当然。

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

Answer 4

你能做到这一点使用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。

Answer 5

你为什么要这样做？这可能是可能的，但我没有看到好处。你还会定义class =“short fat”和class =“tall thin”，还是class =“light dark”？为了清晰和重用，类应该简单明确。如果没有必要且可能引起混淆，应避免多重继承（假或其他）。

class="red green" 

是混淆

class="yellow" 

简洁明了

编辑：我看到了第二个例子，我的建议保持不变。一门课简洁明了，两门可能令人困惑。假设这应该起作用（并且我认为是这样），那么在最流行的浏览器（IE）中花大力气去对付错误可能是不值得的。

Answer 6

这里是我的解决方法：

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

它并不像我所希望的优雅。它为每个项目使用一个额外的元素;但至少它仍然很干净。