Селектор CSS "(A или B) и C"?

Question

Селектор CSS "(A или B) и C"?

Это должно быть просто, но у меня возникли проблемы с поиском терминов для него.

Допустим, у меня есть это:

<div class="a c">Foo</div>

<div class="b c">Bar</div>

в CSS, как я могу создать селектор, который соответствует тому, что соответствует "(.или .Б) и .с"?

Я знаю, что я мог бы сделать это:

.a.c,.b.c {

  /* CSS stuff */

}

но, предполагая, что мне придется делать такую логику много, с различными логическими комбинациями, есть ли лучший синтаксис?

450 4

html css css-selectors

4 ответов:

Comments

Ничего не найдено.

Matt Ball · Accepted Answer · 2011-09-22 18:37:07

есть ли лучший синтаксис?

нет. CSS'or оператор (,) не разрешает группировку. Это, по сути, логический оператор с наименьшим приоритетом в селекторах, поэтому вы должны использовать .a.c,.b.c.

Metalcoder · Accepted Answer · 2015-05-22 14:25:11

пока нет, но есть экспериментальные :matches() селектор, который делает именно это:
:matches(.a .b) .c {
  /*stuff goes here */
}
вы можете найти дополнительную информацию о нем здесь и здесь. В настоящее время большинство браузеров поддерживают его начальную версию :any(), который работает так же, но будет заменен на :matches(). Мы просто должны подождать немного больше, прежде чем использовать это везде (я уверен, что будет).

Šime Vidas · Accepted Answer · 2011-09-22 18:40:44

если у вас есть это:
<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>
и вы только хотите, чтобы выбрать элементы, которые имеют .x и (.a или .b), вы могли бы написать:
.x:not(.c) { ... }
но это удобно только тогда, когда у вас есть три "подкласса", и вы хотите выбрать два из них.

выбор только одного подкласса (например .a):.a.x

выбор двух подклассов (например .a и .b):.x:not(.c)

выбрать все три подкласса: .x

Spudley · Accepted Answer · 2011-09-22 18:45:43

нет. Стандартный CSS не предоставляет то, что вы ищете.

однако, вы можете посмотреть в меньше и Сасс.

Это два проекта, которые направлены на расширение синтаксиса CSS по умолчанию путем введения дополнительных функций, включая переменные, вложенные правила и другие усовершенствования.

Они позволяют вам писать гораздо более структурированный код CSS, и любой из них почти наверняка решит ваше конкретное использование случай.

конечно, ни один из браузеров не поддерживает их расширенный синтаксис (тем более, что каждый из двух проектов имеет различный синтаксис и функции), но то, что они делают, это предоставить "компилятор", который преобразует ваш код LESS или SASS в стандартный CSS, который затем можно развернуть на вашем сайте.