[html] CSS 입력 유형 선택기- “or”또는 “not”구문을 사용할 수 있습니까?

Program / 글쓴이

프로그래밍에 존재하는 경우),

다음 입력이 포함 된 HTML 양식이있는 경우 :

<input type="text" />
<input type="password" />
<input type="checkbox" />

type="text"또는 인 모든 입력에 스타일을 적용하고 싶습니다 type="password".

또는 모든 입력의 where type != "checkbox".

이 작업을 수행해야하는 것 같습니다.

input[type='text'], input[type='password']
{
   // my css
}

할 방법이 없습니까?

input[type='text',type='password']
{
   // my css
}

또는

input[type!='checkbox']
{
   // my css
}

주위를 둘러 보았는데 하나의 CSS 선택기로이 작업을 수행 할 수있는 방법이없는 것 같습니다.

물론 큰 문제는 아니지만 나는 단지 호기심 많은 고양이입니다.

어떤 아이디어?

답변

CSS3에는 : not () 이라는 의사 클래스가 있습니다 .

input:not([type='checkbox']) {
    visibility: hidden;
}
<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>

<ul>
  <li>text: (<input type="text">)</li>
  <li>password (<input type="password">)</li>
  <li>checkbox (<input type="checkbox">)</li>
 </ul>

스 니펫 확장

다중 선택기

Vincent가 언급했듯이 여러 개의 :not()s를 함께 묶을 수 있습니다.

input:not([type='checkbox']):not([type='submit'])

아직 널리 지원되지 않는 CSS4 는 하나의:not() 

input:not([type='checkbox'],[type='submit'])

레거시 지원

모든 최신 브라우저는 CSS3 구문을 지원합니다. 이 질문을 받았을 때 IE7 및 IE8에 대한 대체가 필요했습니다. 한 가지 옵션은 IE9.js와 같은 polyfill 을 사용하는 것이 었습니다 . 또 다른 방법은 CSS에서 캐스케이드를 이용하는 것입니다.

input {
   // styles for most inputs
}

input[type=checkbox] {
  // revert back to the original style
}

input.checkbox {
  // for completeness, this would have worked even in IE3!
}

답변

input[type='text'], input[type='password']
{
   // my css
}

그것이 올바른 방법입니다. 안타깝게도 CSS는 프로그래밍 언어가 아닙니다.

답변