: not () 의사 클래스가 여러 인수를 가질 수 있습니까?

: not () 의사 클래스가 여러 인수를 가질 수 있습니까?

---

및을 제외한 input모든 요소 를 선택하려고합니다 .typeradiocheckbox

많은 사람들이 여러 인수를 넣을 수 있음을 보여 :not주었지만 type어쨌든 사용 은 작동하지 않는 것 같습니다.

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

어떤 아이디어?

---

이유 : 두 가지만 사용하지 마십시오 :not.

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

_{예, 의도적입니다.}

---

프로젝트에서 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*/
}

---

:not선택기 에서 여러 인수를 사용하여 CSS 4부터 시작하는 것이 가능해집니다 ( 여기 참조 ).

In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.

Example:

/* 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;
}

Unfortunately, browser support is limited. For now, it only works in Safari.

---

I was having some trouble with this, and the "X:not():not()" method wasn't working for me.

I ended up resorting to this strategy:

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

It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.

---

If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.

Using cssnext will turn this:

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

Into this:

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

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

참고URL : https://stackoverflow.com/questions/5684160/can-the-not-pseudo-class-have-multiple-arguments