CSS: стиль применяется к комбинации классов?

Я не уверен, что это возможно, но есть ли синтаксис, который можно использовать в CSS, когда вы хотите стилизовать элемент на основе комбинации примененных к нему классов?

Я понимаю, что я могу проверить элемент с помощью jQuery или чего-то еще и изменить его стиль на основе имеющихся у него классов, но есть ли чистый способ CSS для этого?

Например, если у меня есть класс для полужирного и зеленого:

.bold_green { color:green; font-weight:bold; }

И класс для полужирного и синего:

.bold_blue { color:blue; font-weight:bold. }

Теперь предположим, что я использую jQuery для динамического добавления и удаления классов и хочу, чтобы любой элемент, который имеет оба класса, стал курсивом розовым.

Что-то типа:

.bold_green AND .bold_blue { color:pink; font-style:italic; }

Или, если я хочу стилизовать элемент, у которого есть класс и который является потомком другого элемента, у которого есть другой класс?

Что-то типа:

.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }

Спасибо!

Изменить

Спасибо за ответы на все вопросы. Это в значительной степени то, о чем я думал (просто рассматривая классы как обычные селекторы), но, похоже, они не работают для меня. Мне нужно будет проверить свой код и убедиться, что они каким-то образом не переопределяются...


css css-selectors
person Eli    schedule 16.03.2010    source источник
comment
Разве вы не хотели использовать color: blue в классе bold_blue?   -  person BalusC    schedule 16.03.2010
comment
в качестве примечания, если у вас есть такие классы, как bold_green, то, вероятно, что-то не так с тем, как вы проектируете. ‹вставить семантику ›   -  person mpen    schedule 16.03.2010
comment
Чувак. Это пример.   -  person Eli    schedule 17.03.2010

Ответы (4)


arrow_upward
80
arrow_downward 

$('.bold_green.bold_blue').addClass('something-else');

Или в CSS:

.bold_green.bold_blue { color: pink; }

Обратите внимание, что между селекторами нет пробела.

person Paul Alexander    schedule 16.03.2010
comment
Однако есть проблемы с совместимостью с IE, не так ли? - person Richard JP Le Guen; 16.03.2010
comment
Да, IE6 будет читать этот css как .bold_blue { color: pink; }. Вы должны использовать вариант jQuery, предоставленный Полом, поскольку jQuery может правильно выбрать его и добавить новый класс с соответствующим css: .something-else { color: pink; } Я также надеюсь, что это не настоящие имена классов. - person Isley Aardvark; 16.03.2010
comment
В идеале вы должны сначала добавить CSS, как рекомендовано здесь, а затем добавить jQuery, упомянутый в условном комментарии для IE6. - person Miriam Suzanne; 16.03.2010
comment
Хм, упомянуто здесь... w3.org/TR/CSS2/selector .html#class-html ... 'Чтобы соответствовать подмножеству значений класса, перед каждым значением должен стоять ..' - person aaaidan; 31.10.2012

arrow_upward
6
arrow_downward

Вам не нужно ничего особенного, просто

.bold_green.bold_blue { color:pink; font-style:italic; }
person Esteban Küber    schedule 16.03.2010

arrow_upward
4
arrow_downward

Пол и Voyager верны для случая с несколькими классами.

Для случая "HAS CHILD" вы должны использовать:

.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */

Который будет стилизовать любые элементы bold_blue внутри элемента bold_green.

Или, если вы хотели ПРЯМОГО ребенка:

.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */

Который будет стилизовать только элементы bold_blue, у которых есть непосредственный родитель bold_green.

person Joel    schedule 16.03.2010

arrow_upward
1
arrow_downward

В Visual Studio 2013 параметр CSS применяется к нескольким классам с помощью «запятой» следующим образом:

.bold_green, .bold_blue { color:pink; font-style:italic; }

person Mehdi    schedule 09.05.2016