형제 연결자를 사용하여 의사 요소를 숨길 수 없는 이유는 무엇이며 이를 어떻게 달성할 수 있습니까?

형제 조합자를 사용하여 의사 요소 타겟팅

특정 앵커 태그 다음에 생성된 의사 요소를 숨기면서 래핑 이미지를 피하려는 시도로 다음 CSS가 구현되었습니다. :

a[href^="http"]:after {
    /* Styling for the pseudo-element */
}

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

그러나 이 접근 방식은 다음과 같은 점에서 실패했습니다. HTML:

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

이 시도가 실패하는 이유는 무엇입니까?

답변:

형제 결합자를 사용하여 의사 요소(:after)를 타겟팅합니다. (|)는 의사 요소의 콘텐츠가 DOM에서 렌더링되지 않고 조작되지 않기 때문에 불가능합니다. 따라서 CSS는 형제 이미지의 존재를 기반으로 의사 요소를 숨기도록 DOM을 수정할 수 없습니다. CSS2 사양에 명시된 바와 같이:

"생성된 콘텐츠는 문서 트리를 변경하지 않습니다."

이 문제를 해결하려면 JavaScript를 사용하여 다음을 기반으로 의사 요소를 동적으로 숨기는 것을 고려할 수 있습니다. 형제같은 존재감.

위 내용은 형제 연결자를 사용하여 의사 요소를 숨길 수 없는 이유는 무엇이며 이를 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!