다른 요소의 상태에 따라 CSS 요소를 어떻게 대상으로 지정할 수 있습니까?

CSS를 사용하여 다른 요소의 상태에 따라 요소를 선택적으로 타겟팅하는 방법은 무엇입니까?

CSS에서는 다른 요소의 상태에 따라 요소를 타겟팅합니다. 요소는 현재 선택기 구문의 제한으로 인해 어려울 수 있습니다. 상황을 완전히 이해하기 위해 이 기능에 영향을 미치는 세 가지 중요한 조건을 살펴보겠습니다.

상태 기반 요소 선택 조건:

1. 표현 요소 상태: 기존 단순 요소를 사용하여 대상 요소와 참조 요소의 상태를 표현할 수 있습니까? 선택자?
2. 구조적 관계: 조합자를 사용하여 요소 간의 구조적 연결을 설정할 수 있습니까?
3. 선택자 주제: 대상 요소를 사용할 수 있나요? 단지의 주제로 설정 선택기?

현재 선택기의 제한 사항:

주요 제한 사항은 부모 또는 이전 형제 선택기가 없다는 점입니다. 이러한 결함으로 인해 다음과 같은 관계를 구축하는 것이 불가능합니다.

• 상위 대 하위: 상위 상태를 기반으로 하위 요소 식별
• 다음 형제자매에서 나중에 형제자매로: 이전 형제자매의 조건에 따라 나중에 형제자매를 선택합니다. sibling

Selector 4 및 :has() 의사 클래스를 사용한 잠재적인 솔루션:

현재 Selectors 표준에서는 이 문제를 해결하지 않지만 향후 개선 사항 선택자 4에서는 이러한 제한을 완화할 수 있는 가능성이 있는 :has() 의사 클래스를 소개합니다. :has()를 사용하면 선택기가 적용된 상위 요소 내에서 특정 하위 요소를 찾을 수 있습니다.

예:

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

이 선택기는 후속 섹션의 모든 div 요소를 식별합니다. 이전 섹션에 "finished" 속성이 있는 div가 포함된 경우 ".blink" 또는 ".spin" 클래스가 있습니다.

참고: :matches() 의사 클래스는 현재 개발 중이며 아직 모든 브라우저에서 지원되지 않습니다.

임시 해결책으로 Document.querySelector()와 같은 함수를 사용하여 Javascript에서 이 논리를 수동으로 구현할 수 있습니다. 조건을 충족하는 요소

위 내용은 다른 요소의 상태에 따라 CSS 요소를 어떻게 대상으로 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!