형제 조합자가 CSS에서 의사 요소 이전 또는 이후를 선택할 수 있습니까?

형제 조합자는 의사 요소 이전 또는 :이후를 타겟팅할 수 있습니까?

CSS에서 형제 조합자는 다음과 같은 요소에 스타일을 적용하는 데 사용됩니다. 동일한 상위를 공유하지만 서로 중첩되지는 않습니다. 그러나 이러한 조합자를 :before 및 :after와 같은 의사 요소를 대상으로 지정하는 데 사용할 수 있습니까?

도전

다음 CSS 및 HTML을 고려하세요. 코드:

CSS:

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

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

HTML:

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img  src="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="형제 조합자가 CSS에서 의사 요소 이전 또는 이후를 선택할 수 있습니까?" >
</a>

의도

이 CSS는 "http"로 시작하는 앵커에는 빨간색 마커를 추가해야 하지만, 이미지가 포함된 앵커에는 마커를 추가해서는 안 됩니다. img 요소를 사용하여 앵커 태그를 직접 타겟팅할 수 없으므로 형제 연결자는 이미지 형제가 있는 앵커 태그의 :after 의사 요소를 타겟팅할 수 있다고 가정됩니다.

문제

그러나 이 CSS는 의도한 대로 작동하지 않습니다. 이미지가 포함된 앵커의 경우 의사 요소가 숨겨지지 않습니다.

설명

이러한 동작의 이유는 의사 요소의 특성에 있습니다. 의사 요소는 DOM 트리의 일부가 아니며 브라우저에 의해 생성됩니다. 결과적으로 형제 결합자는 이를 직접 타겟팅할 수 없습니다.

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

해결책

원하는 효과를 얻으려면 JavaScript가 다음과 같아야 합니다. 고용. 스크립트는 앵커 태그를 반복하고 이미지 콘텐츠에 따라 원하는 스타일을 추가하거나 제거할 수 있습니다.

위 내용은 형제 조합자가 CSS에서 의사 요소 이전 또는 이후를 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!