CSS3 комбинирует селекторы с ИЛИ вместо И

Учитывая этот селектор:

body[class*="page-node-add-"][class~="page-node-edit"] {background:red;}

Он будет соответствовать телу с классом, который содержит подстрокуpage-node-add- И класс, который точноpage-node-edit

Я хотел бы сказать, соответствует первый ИЛИ второй (но не оба). Является ли это возможным?

The problem with using a comma:

Если у меня есть длинный селектор, как:

body[class*="page-node-add-"] form.node-form > .field-type-field-collection > table > thead tr th,
body[class~="page-node-edit"] form.node-form > .field-type-field-collection > table > thead tr th
{...}

Это боль, я думал, что CSS3 исправит это, я представлял что-то вроде:

body([class*="page-node-add-"]):or([class~="page-node-edit"]) {background:red;}

Спасибо

 Christoph25 мая 2012 г., 13:29
Серьезно, вы должны работать над своим стилем написания CSS, ваши селекторы выглядят (и, скорее всего, работают) ужасно.
 Dominic25 мая 2012 г., 13:49
Спасибо, но я знаю, как написать CSS очень хорошо, и это не так, как я бы обычно это делал. У меня есть задача перейти к тысячам строк разметки, созданной CMS в области администратора (чтобы совместимость с браузерами не была проблемой, а также попытаться раскрасить код, свернуть элемент и т. Д. С помощью css и js, чтобы это имело смысл для редактора среднего веб-сайта

Ответы на вопрос(3)

Решение Вопроса

body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}

The problem with using a comma:

... это то, что вы не можете сделать это иначе, чем через запятую. Возможно, это можно было бы исправить с помощью Selectors 3, но, к сожалению, в спецификации сказано иначе. Это будет исправлено толькоСелекторы 4либо потому, что это не было предложено до недавнего времени, либоwas предложенный, но не сделал сокращение для уровня 3.

На 4 уровне Селекторов вы сможете сделать что-то вроде этого:

body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

В настоящее время это реализуется под первоначально предложенным названием,:any()с префиксами:-moz-any() а также:-webkit-any(), Но используя:any() в публичном CSS бессмысленно, учитывая, что

only Gecko and WebKit support it; and

you have to duplicate your rulesets because of the way prefixed selectors are handled, which not only defeats the intended purpose of the :matches() selector, but makes things even worse:

body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}
body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

Другими словами, пока реализации не обновятся до стандартизированных:matches(), другого жизнеспособного решения нет (кроме использования препроцессора для генерации повторных селекторов для вас).

 25 мая 2012 г., 13:01
или изучите SCSS, чтобы облегчить боль
 Dominic25 мая 2012 г., 12:59
Спасибо, но я обновил свой вопрос, пожалуйста, смотрите
 18 июн. 2015 г., 03:17
Подобный ответ (который мне нравится немного больше, поскольку он ссылается на другой предыдущий ответ на этот вопрос)stackoverflow.com/a/10753421/2255628 (также на этой странице).
 18 июн. 2015 г., 07:52
@Destiny Architect: Я действительно предпочитаю этот ответ предыдущему, так как этот подчеркивает контрпродуктивность использования префиксов в производстве. Но я все равно должен пометить вопросы как дубликаты. Это просто вопрос того, какой из них должен быть целью.

CSS Сокращение для идентификации нескольких классов

У Mozilla и webkit есть -moz-any или -webkit-any, хотя в спецификации CSS4 есть: совпадения. Удивительно, что об этом не думали в CSS3, поскольку это значительно уменьшило бы количество повторяющегося кода без необходимости использовать SASS, LESS или что-то еще.

 25 мая 2012 г., 13:17
Да, но из-за префиксов вы должны дублировать правила. Применяя этот другой мой ответ к тому, что у вас есть, вы можете видеть, что он действительно не помогает вопросам ...
 18 июн. 2015 г., 03:14
Подобный ответstackoverflow.com/a/10753216/2255628 (также на этой странице). & # X2018; матчи и # x2019; хорошее описание вcss-tricks.com/almanac/selectors/m/matches но в настоящее время не вcaniuse.com/#search=matches какdom.spec.whatwg.org/#dom-element-matchesselectors не такой же.

Итак, вы действительно хотитеXOR когда я читаю твой вопрос Вы можете достичь этого с помощью:not выберите и скажите «класс один, а не другой» и наоборот.

div.one:not(.two), div.two:not(.one) {
    background:red;
}

Вот скрипка: http://jsfiddle.net/XfgxK/3/

 25 мая 2012 г., 13:30
@BoltClock Нет, OP просит xor.
 25 мая 2012 г., 13:30
Как только вы заменяете эти классы с заданными атрибутами или полными комплексными селекторами, это долго сходит с ума. Опять же, пока нет жизнеспособного обходного пути.
 25 мая 2012 г., 13:40
Да, но вы должны знать, что это еще один сценарий, поскольку вы сейчас сопоставляете прежние несвязанные элементы div.jsfiddle.net/TyYJ5/1 Что не так при использовании предыдущего кода:jsfiddle.net/XfgxK/5
 25 мая 2012 г., 13:33
Ну, это довольно запутанно. Оператор нашел другой мой ответ, который говорит точно то же самое, и он называет его «ответом», но после второго чтения кажется, что он запрашивает XOR, а не OR.
 25 мая 2012 г., 13:30
Это именно то, что он хочет, насколько я правильно понял вопрос.

Ваш ответ на вопрос