Lớp giả: not () giả có thể có nhiều đối số không?

Tôi đang cố gắng chọn inputcác yếu tố của tất cả typengoại trừ radiovà checkbox.

Nhiều người đã chỉ ra rằng bạn có thể đưa nhiều đối số vào :not, nhưng sử dụng typedường như không hoạt động dù sao tôi cũng thử.

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

Có ý kiến ​​gì không?

Tại sao: không chỉ sử dụng hai :not:

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

_{Vâng, đó là cố ý}

Nếu bạn đang sử dụng SASS trong dự án của mình, tôi đã tạo ra mixin này để làm cho nó hoạt động theo cách mà tất cả chúng ta muốn nó:

@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;
    }
}

nó có thể được sử dụng theo 2 cách:

Tùy chọn 1: liệt kê các mục bị bỏ qua nội tuyến

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

Tùy chọn 2: liệt kê các mục bị bỏ qua trong một biến đầu tiên

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

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

CSS xuất ra cho một trong hai tùy chọn

input {
    /*non-ignored styling goes here*/
}

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

Bắt đầu từ CSS Selector 4 bằng cách sử dụng nhiều đối số trong :notbộ chọn trở nên khả thi ( xem tại đây ).

Trong CSS3, bộ chọn: not chỉ cho phép 1 bộ chọn làm đối số. Trong bộ chọn mức 4, nó có thể lấy danh sách bộ chọn làm đối số.

Thí dụ:

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

Thật không may, hỗ trợ trình duyệt bị hạn chế . Hiện tại, nó chỉ hoạt động trong Safari.

Tôi đã gặp một số rắc rối với điều này và phương thức "X: not (): not ()" không hiệu quả với tôi.

Cuối cùng tôi đã dùng đến chiến lược này:

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

Nó gần như không vui, nhưng nó hoạt động với tôi khi: không () đang tỏ ra hăng hái. Nó không lý tưởng, nhưng nó vững chắc.

Nếu bạn cài đặt plugin Post CSS "cssnext" , thì bạn có thể bắt đầu sử dụng cú pháp mà bạn muốn sử dụng ngay bây giờ một cách an toàn.

Sử dụng cssnext sẽ biến điều này:

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

Vào đây:

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

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