CSS의 특정 클래스에 속하지 않는 입력 요소를 어떻게 대상으로 지정할 수 있습니까?

부정 없는 CSS 선택자

CSS에서는 전용 " 아님" 선택기. 이 제한 사항은 수년 동안 웹 개발자들에 의해 인식되어 대체 솔루션을 찾게 했습니다.

다음 CSS 규칙을 고려하십시오.

.classname input {
  background: red;
}

이 규칙은 내부의 모든 입력 필드에 빨간색 배경을 할당합니다. 클래스 이름이 "classname"인 HTML 요소입니다. 그러나 빨간색 배경 스타일에서 "classname" 요소 내의 입력 필드를 제외한다고 가정해 보겠습니다. 이를 어떻게 달성할 수 있습니까?

현재 브라우저 지원

안타깝게도 현재 웹 브라우저는 CSS의 제외 선택기를 지원하지 않습니다. 제공된 예는 CSS만으로는 달성할 수 없습니다.

대체 솔루션

CSS에는 제외 선택기가 없지만 대체 솔루션이 있습니다.

• JavaScript 또는 jQuery 사용: jQuery와 같은 JavaScript 프레임워크는 :not()과 같은 메서드를 제공하여 특정 기준과 일치하지 않는 요소를 선택합니다.

<code class="js">$j(':not(.classname)>input').css({background:'red'});</code>

• 중첩 규칙: 중첩 규칙을 사용하면 스타일에서 특정 요소를 간접적으로 제외할 수 있습니다.

input {
  background: #ccc;
}

.classname input {
  background: red;
}

이 예에서는 기본적으로 모든 입력 필드의 배경이 회색입니다. 클래스 이름이 "classname"인 요소 내에서 입력 필드는 이 스타일을 빨간색 배경으로 재정의합니다. 이 접근 방식은 위치에 관계없이 "classname" 요소 내의 모든 입력 필드 스타일에 영향을 미칩니다.

CSS 네거티브 선택기에 대한 브라우저 지원이 수년간 논의되었지만 여전히 문제가 있다는 점에 유의하는 것이 중요합니다. 이 글을 쓰는 시점에서는 공식적인 구현이 없습니다. 브라우저 기술이 계속 발전함에 따라 이 기능은 향후 제공될 수도 있습니다.

위 내용은 CSS의 특정 클래스에 속하지 않는 입력 요소를 어떻게 대상으로 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!