it-swarm.com.ru

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

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

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

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

Есть идеи?

689
delphi

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

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

Да, это намеренно

1401
Felix Kling

Если вы используете 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*/
}
43
Daniel Tonon

Начиная с 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.

29
Pieter Meiresone

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

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

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

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

7
eatCasserole

Если вы установите плагин "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

4
Daniel Tonon