Селектор CSS, который применяется к элементам с двумя классами

есть ли способ выбрать элемент с CSS на основе значения атрибута class, установленного на два определенных класса. Например, предположим, у меня есть 3 divs:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

какой CSS я мог бы написать, чтобы выбрать только второй элемент в списке, основываясь на том, что он является членом классов foo и bar?

1 ответов


цепочка обоих селекторов классов (без пробела между ними):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

Если вам все еще приходится иметь дело с древними браузерами, такими как IE6, имейте в виду, что он не читает цепные селекторы классов правильно: он будет читать только последние селектор класса (.bar в этом случае) вместо этого, независимо от того, какие другие классы вы перечисляете.

чтобы проиллюстрировать, как другие браузеры и IE6 интерпретируют это, рассмотрим этот CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

выход на поддерживаемые браузеры:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

выход на IE6:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

Примечания:

  • поддерживаемые браузеры:
    1. Не выбран как этот элемент имеет только класс foo.
    2. избранные как этот элемент имеет оба класса foo и bar.
    3. Не выбран как этот элемент имеет только класс bar.

  • ИЕ6:
    1. Не выбран поскольку этот элемент не имеет класса bar.
    2. избранные как этот элемент имеет класс bar, независимо от любых других классов, перечисленных.