Определение стилей для комбинаций классов

Вы можете выбрать несколько классов:

span.red.green { color: yellow; }

Это применимо к любому элементу span с красным и зеленым классами. Возможно, это не то, что вам нужно, поскольку это также применимо, например, к:

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

Обратите внимание, что в IE 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/>

Я не знаю, что именно вы хотите, но это мой подход. Я надеюсь, что это помогает.

Конечно.

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

Вы можете сделать это с помощью 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.

почему ты хочешь сделать это? это возможно, но я не вижу пользы. Вы бы также определили class = "short fat" и class = "high thin" или как насчет class = "light dark"? Классы должны быть простыми и конкретными для ясности и повторного использования. Следует избегать множественного наследования (фальшивого или иного), когда оно не нужно и может сбивать с толку.

class = "red green"

сбивает с толку

class = "yellow"

кратко и ясно

Обновлено: я видел второй пример, мой совет остается неизменным. Один класс краткий и ясный, два потенциально сбивают с толку. Предполагая, что это должно работать (а я думаю, что это так), прилагать большие усилия для борьбы с ошибками в самом популярном браузере (IE), вероятно, не стоит.

Вот мой обходной путь:

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

Это не так элегантно, как я надеялся. Он использует дополнительный элемент для каждого элемента; но, по крайней мере, он все еще довольно чистый.