나는 선택하기 위해 노력하고있어 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 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 선택기 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;
}불행히도 브라우저 지원은 제한적 입니다. 현재로서는 Safari에서만 작동합니다.
답변
이 문제가 발생하여 “X : not () : not ()”메서드가 작동하지 않았습니다.
나는이 전략에 의지했다.
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}그것은 거의 재미가 없지만 : not ()이 pugnacious되었을 때 저에게 효과적이었습니다. 이상적이지는 않지만 견고합니다.
답변
“cssnext”Post CSS plugin 을 설치하면 지금 사용하려는 구문을 사용하여 안전하게 시작할 수 있습니다.
cssnext를 사용하면 다음과 같이됩니다.
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}이것으로 :
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}