为类的组合定义样式

时间:2008-12-11 18:43:48

标签: css

有没有办法为类组合定义样式?例如,我希望我的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元素的突出显示文本最终都是蓝色。

6 个答案:

答案 0 :(得分:9)

您可以选择多个班级:

span.red.green { color: yellow; }

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

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

请注意,这在IE 6中无效。

答案 1 :(得分:4)

不确定

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

答案 2 :(得分:0)

你可以使用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的情况下完成它。

答案 3 :(得分: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>

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

答案 4 :(得分:0)

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

class="red green"

令人困惑

class="yellow"

简洁明了

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

答案 5 :(得分:-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/>

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

豫ICP备18024241号-1