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中无效。

Answer 2

不确定

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

Answer 3

你可以使用Javascript来做到这一点，虽然我最好只创建一个黄色类，如果你对javascript方法感兴趣请评论（我需要考虑一下，并且它已经更有效率了这在你的逻辑层）

编辑 | 更多编辑（为当前颜色添加正则表达式）
好吧，你不感兴趣，但我仍然会写它，因为它看起来很有趣：

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 4

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

class="red green"

令人困惑

class="yellow"

简洁明了

编辑：我看到了第二个例子，我的建议保持不变。一个课程简明扼要，两个课程可能令人困惑。假设这应该有效（我认为是这样），在最流行的浏览器（IE）中花费大量精力来对抗bug可能是不值得的。

Answer 5

以下是我的解决方法：

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

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

Answer 6

也许是这样的

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

我不知道这是你想要的，但这是我的方法。我希望它有所帮助。

为类的组合定义样式

6 个答案: