개발자는 상황에 맞는 선택기를 사용하여 문서의 다양한 부분에 대해 다양한 유형의 스타일을 선택할 수 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
