Может ли псевдокласс: not () иметь несколько аргументов?

748

Я пытаюсь выбрать inputэлементы всех types кроме radioи checkbox.

Многие люди показали, что вы можете вводить несколько аргументов :not, но использование type, похоже, не работает в любом случае, я пробую это.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Любые идеи?

css css-selectors

— Дельфи
источник

24

«Многие люди показали, что вы можете ввести несколько аргументов: не». Либо эти люди цитировали определенную статью, на которую часто ссылаются, но серьезно вводят в заблуждение, либо они говорили о jQuery, а не о CSS. Обратите внимание, что данный селектор действительно действителен в jQuery, но не в CSS. Я написал вопросы и ответы, подробно описывающие различия: stackoverflow.com/questions/10711730/… (ответ также упоминает, что статья на стороне)

— BoltClock

10

Поздравляем! Вы успешно написали верный CSS4.0 в своем примере за 2 года до выхода официальной версии.

— Джек Гиффин

1

@ Джек Гиффин: На какое «официальное издание» вы ссылаетесь? Этот вопрос только предшествует FPWD селекторов-4 к 5 месяцам, а спецификация еще далеко не завершена: w3.org/TR/2011/WD-selectors4-20110929/#negation И это предшествует первой реализации: 4 с половиной года : stackoverflow.com/questions/35993727/…

— BoltClock

1539

Почему: не просто использовать два :not:

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

_{Да, это намеренно}

— Феликс Клинг
источник

4

Это имеет высокую специфичность.

— Undistraction

63

Для тех, кто не понимает юмора: он сказал «Почему бы нет ...» с :характером.

— Тотемедли

11

В качестве примечания: если вы делаете что-то подобное, input:not('.c1'), input:not('c2')вы в конечном итоге сталкиваетесь с «и», когда оба класса должны быть на входе, чтобы это совпадало.

— Cloudkiller

3

@BoltClock Задержка, но, следовательно, и стремление к :not([attr],[attr])формату CSV :-P

— TylerH

3

@Cloudkiller нет, что бы выбрать любой элемент ввода -> «ввод без класса c1 ИЛИ ввод без класса c2»

— Дэвид

49

Если вы используете SASS в своем проекте, я создал этот миксин, чтобы он работал так, как мы все хотим:

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

это можно использовать двумя способами:

Вариант 1: список игнорируемых элементов в строке

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

Вариант 2: сначала перечислить игнорируемые элементы в переменной

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

Вывод CSS для любого варианта

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}

— Даниэль Тонон
источник

6

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

— osirisgothra

Какая? поэтому лучше написать .selector: not (.one): not (.two): not (.three): not (.four) {...} чем .selector {@include not ('. one', ' .two ','. three ','. four ') {...}}?

— Даниэль Тонон

2

С точки зрения эффективности: да. Намного меньше 'символов и более эффективный код.

— Даан

:not()= 6 символов на предмет; '',= 3 символа за единицу. @includeдолжна быть назначена горячей клавише, поэтому я буду считать это одним символом (с точки зрения его ввода). Технически я не думаю, что вам даже нужно использовать одинарные кавычки в списке, если вы их так ненавидите. Они действительно помогают предотвратить волнение редакторов все же. Исходя из этого, я все еще думаю, что мой способ - более эффективный способ написания.

— Даниэль Тонон

2

@DaanHeskes также, что запись всех случаев: not () не позволяет вам использовать переменную для их перечисления.

— plong0

30

Начиная с CSS-селекторов 4, можно использовать несколько аргументов в :notселекторе ( см. Здесь ).

В CSS3 селектор: not допускает только 1 селектор в качестве аргумента. В селекторах уровня 4 он может принимать список селекторов в качестве аргумента.

Пример:

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

К сожалению, поддержка браузера ограничена . Пока это работает только в Safari.

— Питер Мейресоне
источник

3

По словам caniuse.com , это все еще поддерживается только Safari

— клевета

8

Имейте в виду, что это CSS 4-го уровня, а не CSS 4, такого понятия как CSS 4 не существует и, вероятно, он никогда не будет существовать.

— Эду Руис

8

У меня были некоторые проблемы с этим, и метод «X: not (): not ()» не работал для меня.

В итоге я прибег к этой стратегии:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

Это не так весело, но у меня получилось, когда: not () был отвратительным. Это не идеально, но это твердо.

— eatCasserole
источник

5

Если вы установите плагин «cssnext» Post CSS , то вы можете смело начинать использовать тот синтаксис, который хотите использовать прямо сейчас.

Использование cssnext превратит это:

input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

В это:

input:not([type="radio"]):not([type="checkbox"]) {
  /* css here */
}

http://cssnext.io/features/#not-pseudo-class

— Даниэль Тонон
источник