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

Спасибо!

Править

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

33
задан Eli 16 March 2010 в 03:48
поделиться

3 ответа

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

Или в CSS:

.bold_green.bold_blue { color: pink; }

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

69
ответ дан 27 November 2019 в 17:51
поделиться

Paul и Voyager правы для случая нескольких классов.

Для случая "HAS CHILD" вы бы использовали:

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

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

Или если вам нужен DIRECT-потомок:

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

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

3
ответ дан 27 November 2019 в 17:51
поделиться

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

.bold_green.bold_blue { color:pink; font-style:italic; }
6
ответ дан 27 November 2019 в 17:51
поделиться
Другие вопросы по тегам:

Похожие вопросы: