CSS의 상황별 선택자는 무엇입니까?

개발자는 상황에 맞는 선택기를 사용하여 문서의 다양한 부분에 대해 다양한 유형의 스타일을 선택할 수 있습니다. CSS에서 개발자는 스타일을 직접 지정하거나 특정 클래스를 생성하여 스타일을 지정할 수 있습니다. 상황별 선택기는 지정된 요소에만 스타일을 적용합니다. 문서의 요소들 사이의 부모-자식 관계를 컨텍스트라고 부를 수 있습니다. 컨텍스트 선택기에는 2개 이상의 별도 선택기가 있습니다.

이 글에서는 CSS에서 상황별 선택자가 무엇인지, 어떻게 사용하는지 알아봅니다.

문맥 선택기란 무엇이며 왜 사용하나요?

컨텍스트 선택기에는 클래스 또는 ID와 같은 두 개의 선택기가 포함되어 있으며 이를 단순 선택기라고 합니다. 컨텍스트 선택기의 구문을 살펴보고 이것이 무엇을 의미하고 어떻게 사용하는지 이해해 보겠습니다.

문법

으아악

위 구문에서는 공백으로 구분된 간단한 선택기를 사용하고 있음을 알 수 있습니다. 스타일을 지정하려는 특정 요소에 CSS 속성을 적용할 수 있으며, 스타일은 전체 HTML 문서에서 컨텍스트가 있는 모든 요소에 적용됩니다. 선택기를 더 잘 이해하기 위해 출력을 살펴보겠습니다.

예

Method - 내부에 2개의 단락 태그가 있는 div 태그를 사용합니다. 즉, div는 상위 요소가 되고 단락은 하위 요소가 됩니다. 부모 요소를 사용하여 이러한 요소의 색상을 변경합니다. 이제 코드를 살펴보겠습니다.

으아악

위 코드에서는 div를 생성한 다음 해당 div 안에 2개의 문단(태그)을 추가한 다음 div 요소 외부에 문단을 하나 더 추가한 다음 CSS 섹션으로 이동하여 div 요소의 색상을 "로 변경했습니다. 노란색"이고 단락은 "연한 녹색"입니다. 이는 HTML 문서의 모든 단락 요소가 "연한 녹색" 색상을 가짐을 의미합니다. 위 코드의 기능을 이해하기 위해 출력을 살펴보겠습니다.

위 출력에서 ​​div 내에서도 모든 단락의 색상이 "연두색"임을 알 수 있습니다. 하지만 div 요소 내에서 한 단락의 색상만 변경하고 싶다면 어떻게 해야 할까요? div 내부 단락의 색상을 변경하는 방법이 궁금할 수 있지만 div 외부 단락의 색상은 변경할 수 없습니다.

컨텍스트 선택기의 진정한 중요성을 이해할 수 있도록 컨텍스트 선택기가 사용되는 또 다른 방법을 살펴보겠습니다.

구문

문맥 선택기 사용

으아악

위 구문에서는 div 외부 요소가 아닌 div 요소 내부의 단락을 대상으로 하고 있음을 알 수 있습니다.

이 속성을 더 구체적으로 암시할 수 있도록 다른 예를 살펴보겠습니다.

예

여기서 div 태그로 둘러싸인 단락 태그를 만들고 해당 단락의 색상을 div 외부 단락과 다르게 설정하겠습니다. 이제 이 작업을 수행하는 방법을 이해하기 위해 코드를 살펴보겠습니다.

으아악

위 코드에서는 div 내부에 2개의 단락 태그를 추가한 다음 해당 div 외부에 다른 단락을 추가한 다음 컨텍스트 선택기를 사용하여 div 외부가 아닌 내부에 있는 단락의 색상만 변경한 것을 볼 수 있습니다. div. 위 코드의 기능을 이해하기 위해 출력을 살펴보겠습니다.

위 출력에서 ​​두 단락은 "물색" 색상이고 div 요소 외부의 단락은 기본 색상인 것을 볼 수 있습니다.

컨텍스트 선택기를 사용하면 개발자는 스타일과 속성을 적용하기 위해 대상으로 삼고 싶은 태그를 지정할 수 있습니다.

위의 2가지 예는 개발자가 상황별 선택기를 사용하고 지정된 요소에만 스타일을 적용하는 방법을 보여줍니다.

결론

컨텍스트 선택기는 처음에는 혼란스러워 보일 수 있지만 매우 특정한 요소의 스타일을 변경하려고 할 때 매우 유용합니다. 이러한 상황별 선택기는 개발자가 변경하려는 요소의 스타일을 변경할 수 있으므로 개발자에게 더 큰 제어 감각을 제공합니다.

이 글에서는 컨텍스트 선택기의 사용법과 사용 목적이 무엇인지 배웠습니다.

위 내용은 CSS의 상황별 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!