CSS «и» и «или»

114

У меня довольно большая проблема, потому что мне нужно анатематизировать стили некоторых типов ввода. У меня было что-то вроде:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

Но я тоже не хочу стилизовать флажки.

Я пробовал:

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

Как пользоваться &&? И мне скоро нужно будет использовать ||, и я думаю, что использование будет таким же.

Обновление:
до сих пор не умею пользоваться ||и &&правильно. Я ничего не нашел в документах W3.

css css-selectors conditional-operator Misiur
источник
17
"анатематизировать" Ой. Вы хотите угрожать людям, пытающимся установить флажки, божественным возмездием? (Вы, вероятно, имели в виду «исключить» или что-то подобное, например, «Мне нужно исключить некоторые типы ввода из правила стилизации».)
TJ Crowder
3
Ну, я не смог найти хороший перевод фразового глагола с моего языка;)
Misiur
4
Думаю, @TJ Crowder это понял. Но это было забавно ... особенно ирония его неправильного написания "божественный" = D
Дэвид говорит, что нужно восстановить Монику
Тем не менее, отличный ngram . ; ^)
ruffin

Ответы:

141

&& работает путем объединения нескольких селекторов, например:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

Другой пример:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| работает, разделяя несколько селекторов запятыми, например:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}
Джеффли
источник
1
Хорошо, спасибо за свет. Ненавижу стилизацию форм, но это моя задача, а сайт - не мое. Я буду применять классы к входам.
Misiur
5
Вот полезная диаграмма того, что поддерживает Internet Explorer: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee
12
Кто сейчас использует IE :)
Tarun
2
notпохоже, работает с IE9 и далее (благодаря диаграмме, предоставленной @geofflee).
SharpC
1
Действительно ли мы все еще озабочены поддержкой более старых версий IE в 2018 году? Даже Microsoft этого не делает.
Аномалия
48

И ( &&):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

ИЛИ ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
Kennytm
источник
Нет, тоже провалиться. Он будет применяться 1 к 2 и 2 к 1
Misiur
@KennyTM: Смотри. Использование запятой приведет к примерно следующему: .registration_form_right input: not ([type = "radio"]) будет применяться ко всему, включая флажок, а .registration_form_right input: not ([type = "checkbox"]) будет применяться ко всему, включая радио
Misiur
@Misiur: Конечно. 2-й - для ||случая «ИЛИ» . Обновлено, чтобы уточнить.
kennytm
1
@KennyTM: Мизур пытается сказать ... Твое "||" пример синтаксически верен, но если вы упростите выражение, оно превратится в просто «.registration_form_right input», потому что объединение двух селекторов включает все входные данные.
Джеффли
@geo, @Mis: послушайте, был задан вопрос: «Мне скоро нужно будет использовать ||», так что это способ построить a ||из примеров. Конечно это делается .registration_form_right inputпосле упрощения, но суть в том, что вы используете ,как|| . Вы можете использовать input:not([type="radio"]), input:not([name="foo"])для нетривиального примера.
kennytm
16

Чтобы выбрать свойства aи bиз Xэлемента:

X[a][b]

Чтобы выбрать свойство aИЛИ bиз Xэлемента:

X[a],X[b]
Waao
источник
4

:notПсевдо-класс не поддерживается IE. Вместо этого я получил что-то вроде этого:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

Некоторое дублирование есть, но это небольшая цена за более высокую совместимость.

Макс Шавабке
источник
2

Вы можете каким-то образом воспроизвести поведение «ИЛИ», используя & и: not.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}
Профиль Сержа
источник
2
К сожалению,: not (: not) не является допустимым синтаксисом CSS. Однако он работает с jQuery.
Serge Profafilecebook
1

Думаю, вам не нравится писать больше селекторов и разделять их запятыми?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

и, кстати, это 

not([type="radio" && type="checkbox"])

мне больше похоже на «ввод, который не имеет обоих этих типов» :)

Ярослав Заруба
источник
2
Это не будет работать, так как первый селектор будет выбрать все не- radio, (но было бы выбрать checkbox), а второй будет делать обратное. Объединение двух будет содержать оба checkbox и radio .
Эрик
Этот первый пример не объединяет их вместе, он срабатывает для входов, которые не являются радиомодулями для первого селектора, И для входов, которые не являются флажками, что означает все входы :-)
Дэн Ф.
Ты не прав. Тогда первый будет применяться ко второму, а второй - к первому.
Misiur
1

На всякий случай, если кто-то вроде меня застрянет. Пройдя через пост и несколько ударов и проб, это сработало для меня.

input:not([type="checkbox"])input:not([type="radio"])
Ауриш
источник
1

Небольшое предостережение. Объединение нескольких notселекторов вместе увеличивает специфичность результирующего селектора, что затрудняет переопределение: вам в основном нужно найти селектор со всеми пометками и скопировать и вставить его в новый селектор.

not(X or Y)Селектор может быть большим , чтобы избежать раздуваний специфичности, но я предполагаю , что мы должны придерживаться сочетания противоположностей, как и в этом ответе .

Андрюс Р.
источник