Есть ли способ ссылки на элемент HTML с несколькими классами?

Question

У меня есть следующее

<p class="main yellow">Hello World</p>

Я хотел бы написать элемент CSS, который относится только к элементам с основным и желтым. Есть ли способ сделать это?

Например. следующее не работает, но было бы то, что я после

.main + .yellow { color:green }

Answer 1

Это должно схватить это:

.main.yellow { color:yellow; }

Хотя вы можете получить разные результаты в разных браузерах. Я использую QuirksMode , чтобы получить представление о том, что будет / не будет работать в разных браузерах.

Answer 2

это у вас работает?

.main.yellow{
  color:green;
}

Answer 3

Вам просто нужно указать их как

.main.yellow { color: green; }

Нет пробелов между двумя классами.

Answer 4

Как уже говорили другие, вы хотите:

.main.yellow { color:green; }

Однако позвольте мне быстро объяснить, почему ваша первая попытка не сработала. Ключевое слово + относится к следующему элементу, то есть элементу после.

Ваш пример соответствовал бы следующему HTML ...

<p class="main">Hello</p>
<p class="yellow">World</p>

... и стиль второй абзац (.yellow) зеленый. Таким образом, «.main + .yellow» означает «выбрать .yellow, который следует сразу за .main».