비포함 선택을 위해 CSS 선택기를 사용하는 방법

CSS는 HTML 문서의 모양과 레이아웃을 제어하는 ​​데 사용할 수 있는 매우 강력한 스타일 시트 언어입니다. CSS에서 선택기는 HTML 요소를 선택하기 위한 패턴입니다. 선택기를 사용하면 문서의 요소 스타일을 쉽게 변경하여 원하는 효과를 얻을 수 있습니다. CSS에서는 일부 요소를 선택하고 다른 요소를 제외해야 하는 경우가 있습니다. 이 기사에서는 CSS 선택기를 사용하여 단독 선택을 수행하는 방법을 소개합니다.

옵션을 포함할 필요가 없는 이유는 무엇인가요?

실제 프로젝트에서는 전체 웹페이지 애플리케이션의 요소에 스타일을 적용해야 하는 경우가 있지만 일부 특정 요소는 제외해야 합니다. 이 경우 제외 선택은 필요하지 않은 요소를 제외하여 스타일을 더욱 현실감 있게 만드는 데 유용합니다.

CSS 선택기에 대한 메서드는 포함되지 않음

CSS 선택기는 다양한 유형이 있으며 그 중 일부는 선택기에 포함되지 않은 요소에 사용될 수 있습니다. 이 기사에서는 다음과 같은 일반적인 상황을 소개합니다.

1. 부정 의사 클래스 선택기

부정 의사 클래스 선택기는 특정 요소를 제외한 모든 요소를 ​​선택할 수 있습니다. 일반적으로 :not() 선택기 형식을 사용합니다.

특정 구문:

:not(selector) {}

selector는 제외할 요소를 나타냅니다.

예를 들어 모든 p 요소의 스타일을 설정하고 싶지만 클래스가 hide인 특정 p 요소를 제외하려고 합니다. 코드는 다음과 같습니다.

p:not(.hide) {
  color: red;
}

이 예에서는 :not() 선택기를 사용하여 클래스 이름이 hide인 p 요소가 있는 모든 p 요소를 제외합니다. 이렇게 하면 모든 p 요소의 텍스트 색상이 빨간색이 되지만 hide 클래스의 p 요소 색상은 변경되지 않습니다.

2. 가상 클래스 선택기와 결합된 하위 요소

가상 클래스 선택기와 결합된 하위 요소를 사용하여 특정 요소 아래의 모든 요소를 ​​선택하되 특정 요소는 제외할 수 있습니다.

특정 구문:

selector :not(selector) {}

예를 들어 div 내 모든 p 요소의 스타일을 설정하고 싶지만 클래스가 hide인 특정 p 요소를 제외하려고 합니다. 코드는 다음과 같습니다.

div p:not(.hide) {
  color: red;
}

이 예에서는 사용: not() 선택기와 하위 요소 선택기는 클래스 이름이 hide인 모든 p 요소를 제외합니다. 이렇게 하면 div 요소 내 모든 p 요소의 텍스트 색상이 빨간색으로 변하지만 hide 클래스의 p 요소 색상은 변경되지 않습니다.

3. 유니버설 선택자

유니버설 선택자(*)는 모든 요소를 ​​선택할 수 있지만, 다른 선택자와 결합하여 일부 요소를 제외할 수도 있습니다. 예를 들어, 특정 클래스의 box로 요소의 스타일을 지정하고 싶지만 foo 클래스의 요소 중 하나를 제외하려고 합니다. 코드는 다음과 같습니다.

.box:not(.foo) {
  background-color: blue;
}

이 예에서는 :not() 선택기, 범용 선택 선택기를 사용합니다. 클래스 선택자는 foo 클래스가 있는 모든 요소를 ​​제외합니다. 이런 식으로 foo 클래스를 제외한 모든 요소의 스타일을 클래스 상자로만 지정합니다.

요약

실제 개발에서는 특정 스타일 요구 사항을 충족하기 위해 특정 요소를 제외해야 하는 경우가 많습니다. 이 글에서는 다음을 포함하지 않는 요소를 선택하는 세 가지 방법을 소개했습니다.

• 부정 의사 클래스 선택기 사용: not()
• 가상 클래스 선택기와 결합된 하위 요소 사용: not()
• 범용 선택기(*)

위의 방법을 사용하면 HTML 요소의 스타일을 제어하여 다양한 효과를 얻을 수 있습니다. 필요에 따라 유연하게 사용할 수 있습니다.

위 내용은 비포함 선택을 위해 CSS 선택기를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!