developer tip

CSS와 같지 않은 선택기가 있습니까?

optionbox 2020. 7. 27. 07:50
반응형

CSS와 같지 않은 선택기가 있습니까?


CSS에! = (같지 않음)와 같은 것이 있습니까? 예를 들어 다음 코드가 있습니다.

input {
 ... 
 ...
}

그러나 일부 입력의 경우 이것을 무효화해야합니다. "reset"클래스를 입력 태그에 추가하면됩니다. 예 :

<input class="reset" ... />

CSS에서이 태그를 건너 뛰면됩니다.

내가 어떻게 할 수 있습니까?

내가 볼 수있는 유일한 방법은 입력 태그에 클래스를 추가하고 다음과 같이 CSS를 다시 작성하는 것입니다.

input.mod {
 ...
 ...
}

CSS3에서는 사용할 수있는 :not()필터를, 그래서 당신이 무슨 일을하는지 알고 있어야 할 수 있지만 모든 브라우저가 아직 완전히 CSS3를 지원 해주기되는 모든 주요 브라우저에서 지원 이가이다 (그리고 꽤 많은 시간 동안왔다 대답 ...).

예:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

그리고 CSS

input:not(.avoidme) { background-color: green; }

참고 : 이 해결 방법은 더 이상 필요하지 않습니다. 나는 여기에 문맥으로 남겨두고 있습니다.

CSS3을 사용하지 않으려는 경우 모든 요소에 스타일을 설정 한 다음 클래스를 사용하여 스타일을 재설정 할 수 있습니다.

input { background-color: green; }
input.avoidme { background-color: white; }

CSS에서만 재설정 클래스의 변경 사항을 '되돌리기'하여이를 수행 할 수도 있습니다.

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

CSS3에는가 :not()있지만 아직 모든 브라우저에서 구현되지는 않았습니다. 그러나 IE9 플랫폼 미리보기에서 구현됩니다.

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

그 동안 구식 방법을 고수해야합니다.


다음과 같은 속성을 대상으로하여 접근 할 수도 있습니다.

input:not([type=checkbox]){ width:100%; }

이 경우 '확인란'유형이 아닌 모든 입력의 너비는 100 %입니다.


흥미로운 것은 JQuery를 사용하여 DOM 요소를 선택하기 위해 이것을 시도했지만 작동합니다! :)

$("input[class!='bad_class']");

이 페이지에는 168 개의 div가 있으며 'comment-copy'클래스가 없습니다.

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

instead of class="reset" you could reverse the logic by having class="valid" You can add this by default and remove the class to reset the style.

So from your example and Tomas'

input.valid {
 ... 
 ...
}

and

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>

참고URL : https://stackoverflow.com/questions/3353968/is-there-a-css-not-equals-selector

반응형