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

Использование двух :not в селекторе, как в вашем примере (input:not([type="radio"]):not([type="checkbox"])), вполне возможно и является корректным способом, чтобы отфильтровать элементы, которые являются не радио- или чекбоксами. Однако, есть несколько причин, почему это может быть не самым оптимальным решением:

1. Читаемость: Добавление нескольких :not может усложнить восприятие селектора. Если ваш селектор становится слишком громоздким, его сложнее читать и поддерживать.

2. Производительность: Хотя использование нескольких :not не добавляет значительного замедления, комбинации селекторов могут увеличивать время обработки браузером. Особенно в случаях, когда выбирается много элементов.

3. Альтернативные методы: Вместо использования нескольких :not, можно рассмотреть другие подходы, такие как объединение классов или использование атрибутов. Например, можно добавить класс для всех элементов, которые вы хотите стилизовать, чтобы избежать запутанных селекторов.

Таким образом, два :not — это рабочий вариант, но иногда имеет смысл искать более простые и читабельные решения, которые облегчат поддержку кода в будущем.

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

@mixin not($ignorList...) {
    // Если задано только одно значение
    @if (length($ignorList) == 1) {
        // Вероятно, это переменная списка, поэтому установим список игнорируемых элементов в эту переменную
        $ignorList: nth($ignorList, 1);
    }
    // Инициализируем пустую переменную $notOutput
    $notOutput: '';
    // Для каждого элемента в списке игнорируемых
    @each $not in $ignorList {
        // Генерируем сегмент :not([игнорируемый элемент]) для каждого элемента в списке игнорируемых и собираем их в одну строку
        $notOutput: $notOutput + ':not(#{$not})';
    }
    // Выводим полное правило :not() с перечислением всех игнорируемых элементов
    &#{$notOutput} {
        @content;
    }
}

Миксин может быть использован двумя способами:

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

input {
  /* стиль для неигнорируемых элементов здесь */
  @include not('[type="radio"]', '[type="checkbox"]') {
    /* стиль для игнорируемых элементов здесь */
  }
}

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

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

input {
  /* стиль для неигнорируемых элементов здесь */
  @include not($ignoredItems) {
    /* стиль для игнорируемых элементов здесь */
  }
}

Сгенерированный CSS для любого из вариантов:

input {
    /* стиль для неигнорируемых элементов здесь */
}

input:not([type="radio"]):not([type="checkbox"]) {
    /* стиль для игнорируемых элементов здесь */
}

Надеюсь, это поможет вам упростить работу с игнорируемыми селекторами в вашем проекте!

Я столкнулся с проблемой, и метод "X:not():not()" у меня не сработал.

В итоге я прибегнул к следующей стратегии:

INPUT {
    /* стили */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* стили, сбрасывающие предыдущие стили */
}

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