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

Есть ли способ определить стили для комбинации классов? Например, я хотел бы, чтобы мой 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 или написания структуры elseif, которая проверяет каждый класс styleN. К сожалению, этот код не работает в IE 6 или 7 - выделенный текст для элементов .style1 и .style2 в конечном итоге становится синим.

2 css
11.12.2008 18:43:48
6 ОТВЕТОВ
РЕШЕНИЕ

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

span.red.green { color: yellow; }

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

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

Обратите внимание, что это не работает правильно в IE 6.

9
11.12.2008 18:52:16
Хмм ... похоже, не работает и в IE7 (зелёный диапазон - жёлтый), что как бы нарушает условия сделки.
Soldarnal 11.12.2008 19:05:18
IE разрешает это как ИЛИ, а не как И - то есть он будет соответствовать любому элементу с «зеленым» классом. Вы можете обойти это с правильным дизайном, но не всегда. Если бы вы могли дать нам конкретную цель, мы могли бы ее решить.
annakata 11.12.2008 20:53:49

может как то так

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

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

-1
11.12.2008 18:52:52

Конечно.

.red { color: red; }
.green { color: green; }
.red.green { color: yellow; }
4
11.12.2008 18:53:19

Вы можете сделать это с помощью Javascript, хотя я бы лучше просто создал желтый класс, если вы заинтересованы в методе javascript, пожалуйста, прокомментируйте (мне нужно это обдумать, и было бы более эффективно просто сделать это в вашем логический слой)

РЕДАКТИРОВАТЬ | Еще больше редактирования (добавлено регулярное выражение для текущих цветов).
Ладно, вам это не интересно, но я все еще собираюсь написать его, потому что это выглядит забавно

var re = / ([0-9]?) / г;
$ ("span"). each (function () {
 $ this = $ (this);
 results = re.exec ($ this.css ('background-color')); // фон выглядит примерно так: 'rgb (0, 132, 12)'
 var sRed = результаты [1];
 var sGreen = результаты [2];
 var sBlue = results [3];
 / * СТАРЫЙ!
 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.

0
11.12.2008 19:41:31
Очень хорошо! К сожалению, я не собираюсь ничего делать с цветом; это был просто пример, который я использовал.
Soldarnal 11.12.2008 19:29:07
Ааа, ладно, неважно, писать было весело, может быть, когда-нибудь пригодится.
Pim Jager 11.12.2008 19:42:05

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

class="red green"

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

class="yellow"

сжато и понятно

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

0
11.12.2008 22:31:39
Извините, я не должен был использовать два противоречивых класса, как в первом примере. Пожалуйста, посмотрите мой второй пример.
Soldarnal 11.12.2008 22:05:03
@Soldarnal: если комбинации не работают в IE, сколько усилий вы готовы потратить на борьбу с ошибками в самом популярном браузере? Особенно, когда альтернатива - сделать другой класс - это так просто ...?
Steven A. Lowe 11.12.2008 22:30:24

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

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

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

0
12.12.2008 03:39:33