为类的组合定义样式

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复制bind函数或者必须编写一个检查每个styleN类的elseif结构.不幸的是,此代码在IE 6或7中不起作用 - .style1和.style2元素的突出显示文本最终为蓝色.

Answer 1

您可以选择多个班级:

span.red.green { color: yellow; }

这将适用于具有红色和绿色类的任何span元素.这可能不是你想要的,因为它也适用于,比如:

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

请注意,这在IE 6中不起作用.