css - 为类的组合定义样式

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

Answer 1

您可以选择多个类:

span.red.green { color: yellow; }

这将适用于任何具有红色和绿色类的 span 元素。这可能不是您想要的，因为它也适用于:

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

请注意，这在 IE 6 中不起作用。