为类的组合定义样式

Is there a way to define styles for a combination of classes? For example, I'd like my HTML to look like this, but the output to render in the appropriate color:

有没有办法为类组合定义样式?例如,我希望我的HTML看起来像这样,但输出要以适当的颜色呈现:

<span class="red">Red Text</span><br/>
<span class="green">Green Text</span><br/>
<span class="red green">Yellow Text</span><br/>

Edit: The above seems to be confusing people when it was just an example; so here is another example:

编辑:当上面只是一个例子时,上面似乎让人困惑;所以这是另一个例子:

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

Again, this is just an example, so don't get hung up on alternating elements or anything like that. What I'm trying to avoid is having to duplicate the bind function for each different styleN or having to write an elseif structure that checks for each styleN class. Unfortunately this code doesn't work in IE 6 or 7 - the highlighted text for both .style1 and .style2 elements end up being blue.

同样,这只是一个例子,所以不要挂断交替元素或类似的东西。我试图避免的是必须为每个不同的styleN复制bind函数或者必须编写一个检查每个styleN类的elseif结构。不幸的是,此代码在IE 6或7中不起作用 - .style1和.style2元素的突出显示文本最终为蓝色。

6 个解决方案

#1

You can select on multiple classes:

您可以选择多个类:

span.red.green { color: yellow; }

That will apply to any span element with red and green classes. Which may not be what you want, since it will also apply to, say:

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

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

Note that this doesn’t work right in IE 6.

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

#2

Sure.

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

#3

You could do this using Javascript, although I it would be better just to create an yellow class, if your interested into the javascript method please comment (I need to think it out, and it would be more efficient just to already do this in your logic layer)

你可以使用Javascript来做到这一点,虽然我最好只创建一个黄色类,如果你对javascript方法感兴趣请评论(我需要考虑一下,并且只是已经在你的逻辑层)

EDIT | Even more edit (added regex for current colors)
Okay, you're not interested but I'm still going to write it because it seems like fun:

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

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 ')';
});

You will need jQuery for that, although you could probably do it without jQuery.

你需要jQuery,尽管你可以在没有jQuery的情况下完成它。

#4

why do you want to do this? it may be possible, but i don't see the benefit. Would you also define class="short fat" and class="tall thin" or what about class="light dark"? Classes should be simple and specific for clarity and reuse. Multiple inheritance (fake or otherwise) should be avoided when it is unnecessary and potentially confusing.

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

class="red green"

is confusing

class="yellow"

is concise and clear

简洁明了

EDIT: i saw the second example, my advice remains unchanged. One class is concise and clear, two is potentially confusing. Assuming that this is supposed to work (and I think it is), expending great effort fighting bugs in the most popular browser (IE) is probably not worthwhile.

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

#5

Here is my workaround:

这是我的解决方法:

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

It's not as elegant as I'd hoped. It uses an extra element for each item; but at least it's fairly clean still.

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

#6

maybe something like this

也许这样的事情

.red
{
color: red;
}

.red_green
{
color: #AS8324;
}

and you can use your html code

你可以使用你的HTML代码

<span class="red">Red Text</span><br/>
<span class="green">Green Text</span><br/>
<span class="red_green">Yellow Text</span><br/>

I don't know this is what you exactly want but this is my approach. I hope it helps.

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