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)Селектор может быть большим , чтобы избежать раздуваний специфичности, но я предполагаю , что мы должны придерживаться сочетания противоположностей, как и в этом ответе .

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