CSS "і" і "або"

113

У мене досить великі неприємності, тому що мені потрібно проаналізувати процес стилізації деяких типів вводу. У мене було щось на кшталт:

.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

— Місюр
джерело

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

Добре, спасибі за світло. Я ненавиджу форми стилів, але це моє завдання, і сайт не мій. Я застосую класи до входів.

— Місюр

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"])

— кеннітм
джерело

Ні, теж невдача. Він застосовуватиметься з 1 по 2 та з 2 по 1

— Місюр

@KennyTM: Подивіться. Використання кома зробить щось на зразок цього: .registration_form_right input: not ([type = "radio"]) застосовуватиметься до всього, включаючи прапорець, а .registration_form_right input: not ([type = "checkbox"]) застосовуватиметься до всього, включаючи радіо

— Місюр

@Misiur: Звичайно. 2-й для випадку "АБО" (ака ||). Оновлено для уточнення.

— kennytm

1

@KennyTM: Те, що Місіур намагається сказати, це… Ваше "||" Приклад синтаксично правильний, але якщо ви спростите вираз, він стає просто ".registration_form_right input", тому що об'єднання двох селекторів включає всі входи.

— геофле

@geo, @Mis: дивіться, питання задає "Мені потрібно скоріше || використовувати", тож це спосіб побудувати ||з прикладів. Звичайно це стає .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]

— ваао
джерело

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

Ви можете якось відтворити поведінку "АБО", використовуючи & і: ні.

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"])  
{  
}

і BTW це

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

мені більше схоже на "вхід, який не має обох цих типів" :)

— Ярослав Заруба
джерело

2

Це не спрацювало б, оскільки перший селектор вибрав би все, що не radio, (але вибрав биcheckbox ), а другий зробив би зворотне. Союз двох містив би і те, checkbox і radio .

— Ерік

Цей перший приклад не && їх разом, він запустить для входів, які не є радіоприймачем для першого селектора, і входів, які не є прапорцями, а це означає, що всі входи :-)

— Dan F

Ви помиляєтеся. Тоді, перший стосуватиметься другого, а другий - першого.

— Місюр

1

Про всяк випадок, якщо хтось застряг, як я. Після того, як пішов, хоч посада і деякий удар і випробування, це працювало на мене.

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

— Ауріш
джерело

1

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

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

— Андрій Р.
джерело