CSS가 형제의 속성을 기반으로 요소를 선택적으로 타겟팅하려면 어떻게 해야 합니까?

CSS가 다른 요소의 상태에 따라 요소를 선택하는 방법

DOM에 있는 다른 요소의 상태를 기반으로 요소를 식별하고 타겟팅하는 것은 어려울 수 있습니다. . CSS 선택자는 연결자 및 선택자 구문에 따른 제약으로 인해 제한된 옵션을 제공합니다. 상위-하위 관계 및 의사 클래스 사용을 포함한 일부 기본 기술을 적용할 수 있지만 특정 시나리오에는 더 고급 솔루션이 필요합니다.

현재 구현의 한계

현재 표준인 선택기 3에는 부모 선택기나 이전 형제 선택기 같은 필수 기능이 부족합니다. 이러한 기능은 요소 구조화 및 대상 지정을 위한 CSS의 기능을 크게 확장합니다. 선택기의 주제를 지정할 수 없다는 점도 제약을 나타냅니다.

향후 선택기 4의 가능성

향후 선택기 4 표준은 이러한 제한 사항을 해결하는 것을 목표로 합니다. jQuery의 기능에서 영감을 받은 :has() 의사 클래스는 유연한 솔루션을 제공합니다. :has()를 사용하면 상위 요소 내에 다른 요소가 있는지에 따라 요소를 선택할 수 있습니다.

문제 해결

질문에 제시된 예제 문제는 다음과 같습니다. 다른 요소의 data-status 속성을 기반으로 한 요소 타겟팅이 필요하며 선택기에서 :has()를 사용하여 해결할 수 있습니다. 4:

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)

이 선택기는 :has()를 사용하여 지정된 데이터 상태의 하위 div가 포함된 섹션을 선택한 다음 다음 중 하나와 일치하는 후속 섹션의 div 요소를 대상으로 지정하여 원하는 결과를 얻습니다. .blink 또는 .spin 클래스.

위 내용은 CSS가 형제의 속성을 기반으로 요소를 선택적으로 타겟팅하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!