CSS 선택기를 사용하여 다른 요소의 상태에 따라 DOM 요소를 어떻게 선택할 수 있습니까?

CSS에서 상태 관계를 기반으로 요소 선택

문제: 지정된 항목을 기반으로 DOM에서 다른 요소를 선택합니다. 요소의 상태.

조건 선택:

• 간단한 선택기(예: div, [data-status~=finished])를 사용하여 상태를 표현합니다.
• 복잡한 선택기를 형성하기 위해 조합기를 사용하여 구조적 관계를 표현합니다. .
• 대상 요소를 콤플렉스의 주제로 만듭니다. selector.

현재 제한 사항:

안타깝게도 다음 이유로 인해 현재 CSS 선택기를 사용하면 이러한 조건을 모두 충족할 수 없습니다.

• 부모 선택자 부족(주제의 조상을 대상으로 함) 요소)
• 이전 형제 선택자가 없음(주제 요소 앞에 오는 형제를 대상으로 함)

향후 기능:

The 곧 출시될 CSS Selectors 4 표준에는 이러한 문제를 해결하는 기능이 도입되었습니다. 제한사항:

• :matches() 의사 클래스: 여러 복합 선택자를 그룹화합니다.
• :has() 의사 클래스: 일치하는 하위 요소를 포함하는 요소를 선택합니다. selector.

예제 문제 해결:

:has() 및 :matches()를 사용하면 CSS 선택기 4의 예제 문제를 해결할 수 있습니다.

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin) {
  /* styles for targeted elements */
}

대체 접근 방식 JavaScript:

이러한 기능은 아직 모든 브라우저에서 지원되지 않지만 현재 JavaScript를 사용하여 :has():

$('section:has(> div[data-status~=finished]) + section > div').filter('.blink, .spin').css('color', 'red');

를 사용하여 요소를 선택할 수 있습니다.

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