:not() 유사 클래스에 여러 개의 인수가 있을 수 있습니까?

:not() 유사 클래스에 여러 개의 인수가 있을 수 있습니까?

선택하려고 합니다.input모든 요소들type을 제외하고radio그리고.checkbox.

많은 사람들이 당신이 여러 개의 주장을 넣을 수 있다는 것을 보여주었습니다.:not하지만 사용하기type아무리 해봐도 소용이 없을 것 같아요.

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

아이디어 있어요?

이유: 두 가지만 사용하는 것이 아닙니다.:not:

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

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

프로젝트에서 SAS를 사용하는 경우, 이 믹스인을 통해 우리 모두가 원하는 방식으로 다음과 같은 작업을 수행할 수 있습니다.

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

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

CSS3에서 :not selector는 하나의 selector만을 인수로 허용합니다.레벨 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;
}

유감스럽게도 브라우저 지원은 다소 새로운 것입니다.

저는 이것에 대해 약간의 어려움을 겪었고, "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 */
}

https://cssnext.github.io/features/ #not-message-class

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