형제 조합자는 :before 또는 :after와 같은 의사 요소를 대상으로 할 수 있습니까?

형제 결합자와 의사 요소

이 CSS 난제에서 우리는 의사 요소를 타겟팅하는 것이 가능한지 여부에 대한 질문에 직면합니다. 구체적으로 :before 또는 :after, 형제 결합자를 사용합니다.

고려하세요. 다음 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="https://www.google.com/logos/classicplus.png">
</a>

이미지가 포함된 태그를 제외하고 일치하는 모든 앵커 태그에 의사 요소를 적용하려는 의도입니다. 하지만 CSS가 예상대로 작동하지 않습니다.

답은 의사 요소의 특성에 있습니다. CSS 사양에 따르면 의사 요소에서 생성된 콘텐츠는 DOM 구조에 영향을 주지 않습니다. 이는 DOM 트리에 존재하는 요소에 의존하는 형제 연결자가 의사 요소를 대상으로 삼을 수 없음을 의미합니다.

즉, CSS는 공유하는 앵커 태그에서 :after 의사 요소를 숨기려고 시도하고 있습니다. 이미지가 있는 부모. 그러나 :after 의사 요소는 DOM에 렌더링되지 않으므로 형제 연결자가 이를 찾는 것이 불가능합니다.

결과적으로 JavaScript는 요소를 기반으로 요소를 타겟팅하는 데 더 적합한 솔루션인 경우가 많습니다. DOM의 다른 요소와의 관계.

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