Я пытаюсь выбрать input элементы всех type кроме radio и checkbox.
Многие люди показали, что вы можете поместить несколько аргументов в :not, но использование type, похоже, не работает, я попробую.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Любые идеи?
Почему: не просто используйте два :not:
input:not([type="radio"]):not([type="checkbox"])
Да, это намеренно
Если вы используете SASS в своем проекте, я создал этот mixin, чтобы он работал так, как мы все хотим:
@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: список игнорируемых элементов inline
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*/
}
Начиная с CSS 4 с использованием нескольких аргументов в :not селектор становится возможным (см. Здесь).
В CSS3: неселектор разрешает только 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.
У меня были проблемы с этим, и метод "X: not(): not()" не работал у меня.
В итоге я прибегал к этой стратегии:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
Это не так весело, но это сработало для меня, когда: not() был драчливым. Это не идеально, но оно твердое.
Если вы устанавливаете плагин "cssnext" Post CSS, вы можете спокойно начать использовать синтаксис, который вы хотите использовать прямо сейчас.
С помощью cssnext это будет выглядеть так:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
В этом:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}