형제 조합자가 CSS의 의사 요소를 대상으로 할 수 있습니까?

형제 연결자 및 의사 요소: 타겟팅 제한

형제 연결자를 사용하여 의사 요소를 타겟팅할 수 있나요? 최근 CSS 문제로 인해 이 질문이 촉발되었습니다.

이 시나리오에서는 이전 이미지가 있는 앵커 태그가 의사 요소를 표시해서는 안 됩니다. 이미지가 존재하기 때문에 앵커를 직접 타겟팅하는 것은 불가능합니다. 따라서 아래와 같이 의사 요소에 형제 결합자를 사용하는 대체 접근 방식이 시도되었습니다.

a[href^="http"]:after {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: red;
}

a[href^="http"] img ~ :after {
    display: none;
}

그러나 앵커 태그가 이미지를 포함할 때 CSS는 의사 요소를 숨기지 못합니다. 왜 그럴까요?

의사 요소의 특성에 한계가 있습니다. 의사 요소를 포함하여 생성된 콘텐츠는 DOM에 포함되지 않으며 원본 문서에 영향을 주지 않습니다. 이는 CSS 사양에 명시적으로 명시되어 있습니다.

"생성된 콘텐츠는 문서 트리를 변경하지 않습니다. 특히 문서 언어 프로세서로 피드백되지 않습니다(예: 재분석을 위해)."

결과적으로 형제 연결자는 DOM의 일부가 아니기 때문에 :before 또는 :after 의사 요소를 타겟팅할 수 없습니다. 구조.

유사한 시나리오의 경우 JavaScript를 사용하여 DOM을 동적으로 조작하고 원하는 스타일 효과를 얻는 것을 고려해 보세요.

위 내용은 형제 조합자가 CSS의 의사 요소를 대상으로 할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!