Вопрос по css-selectors, conditional-operator, css – CSS «и» и «или»

86

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

.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.

"Anathematise" Хлоп. Вы хотите угрожать людям, пытающимся стилизовать флажки с божественным возмездием? (Вы, вероятно, имели в виду «освобожден» или похожий, например, «Мне нужно исключить некоторые типы ввода из правила стиля».) T.J. Crowder
Ну, я не могу найти хороший перевод на фразовый глагол с моего языка;) Misiur
Великий Нграм, хоть. ; ^) ruffin
Я думаю, что @ T.J. Краудер, наверное, понял это. Но этобыло забавно ... особенно ирония его орфографической ошибки "божественная" = D David Thomas

Ваш Ответ

7   ответов
12

Выбрать свойстваa А ТАКЖЕb изX элемент:

X[a][b]

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

X[a],X[b]
109

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

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

div..class2
{
  /* foo */
}

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

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

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

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

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

div.,
div.class2
{
  /* foo */
}
Согласовано. Прошло 8 лет с тех пор, как этот ответ был опубликован. Я удалил устаревшее руководство по поводу селектора: not (). geofflee
Действительно ли мы все еще заинтересованы в поддержке более старых версий IE в 2018 году? Даже Microsoft не делает. Anomaly
Хорошо, спасибо за свет. Я ненавижу стилизацию форм, но это моя задача, а сайт не мой. Я буду применять классы для входов. Misiur
Кто сейчас пользуется IE :) Tarun
0

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

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

и кстати это

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

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

Это не сработает, потому что первый селектор выберет всеradio, (нобыло бы выберитеcheckbox), а второй сделал бы обратное. Союз двух будет содержать обаcheckbox а также radio. Eric
ты прав :) Jaroslav Záruba
Этот первый пример не объединит && их вместе, он сработает для входов, которые не являются радиоприемниками для первого селектора, и входов, которые не являются флажками, что означает все входы :-) Dan F
Ты не прав. Затем первый относится ко второму, а второй - к первому. Misiur
0

и: not.

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

А ТАКЖЕ (&&):

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

ИЛИ ЖЕ (||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
@Misiur: я не понимаю. kennytm
@Misiur: Конечно. 2-й для «ИЛИ» (a.k.a.||) дело. Обновлено, чтобы уточнить. kennytm
@KennyTM: То, что Мизюр пытается сказать, это ... Твоя "||" Пример синтаксически правильный, но если вы упростите выражение, оно станет просто «.registration_form_right input», потому что объединение двух селекторов включает все входы. geofflee
Нет, тоже не удастся Это будет применяться 1 к 2 и 2 к 1 Misiur
3

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

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

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

Ты совершенно прав. Но лучше всего добавить класс для ввода. Misiur
1

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

input:not([type="checkbox"])input:not([type="radio"])
Это хорошо работало как синтаксис AND. zmechanic

Похожие вопросы