CSS를 사용하여 하위 콘텐츠를 기반으로 상위 요소의 스타일을 어떻게 지정할 수 있나요?

CSS를 사용하여 하위 콘텐츠 기반 요소 타겟팅

하위 요소를 기반으로 상위 요소에 고유한 CSS 스타일을 적용해야 할 수도 있습니다. 그들은 포함하고 있습니다. 기존 CSS 선택기가 특정 요소를 타겟팅하는 데 중점을 두는 반면, :has() 선택기를 사용하여 조건부 스타일을 적용하는 방법이 있습니다.

:has() 구문은 다음과 같습니다.

div:has(div.a) {
  border: solid 3px red;
}
div:has(div.b) {
  border: solid 3px blue;
}

이 구문을 사용하면 특정 하위 요소가 포함된 div 요소에 스타일을 적용할 수 있습니다. 예를 들어 위의 규칙은 "a" 클래스의 하위 요소가 포함된 div 요소에 빨간색 테두리를 추가하고 "b" 클래스의 하위 요소가 포함된 div 요소에는 파란색 테두리를 추가합니다.

예 :

<style>
  div:has(div.a) {
    border: solid 3px red;
  }
  div:has(div.b) {
    border: solid 3px blue;
  }
</style>
<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

이 코드는 두 개의 div 요소를 생성합니다. 하나는 빨간색 테두리이고 다른 하나는 파란색 테두리입니다. 포함합니다.

참고: :has() 선택기는 최신 브라우저에서 널리 지원되지만 이전 브라우저에서는 작동하지 않을 수 있습니다.

위 내용은 CSS를 사용하여 하위 콘텐츠를 기반으로 상위 요소의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!