유사 요소가 CSS의 `` 태그와 작동하지 않는 이유는 무엇입니까?

의사 요소 및 이미지 요소: CSS 수수께끼

CSS에서 :before 및 :after와 같은 의사 요소가 널리 적용됨에도 불구하고 이미지 요소(<img src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="유사 요소가 CSS의 `` 태그와 작동하지 않는 이유는 무엇입니까?" >)의 기능은 여전히 ​​수수께끼 같은 예외로 남아 있습니다. 아래 코드 조각에서 볼 수 있듯이 img 요소에 의사 요소를 추가하면 예상한 결과가 생성되지 않습니다.

<img  src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="유사 요소가 CSS의 `` 태그와 작동하지 않는 이유는 무엇입니까?" >

img:before {
  content: "hello";
}

div 및 범위와 같은 다른 요소와 원활하게 작동하지만 원하는 효과는 다음과 같습니다. img 요소에 적용하면 없습니다.

비하인드 스토리: CSS 사양

CSS 사양은 이러한 불일치를 밝혀줍니다. HTML의 img를 포함하여 의사 요소와 대체 요소 간의 상호 작용이 현재 버전에서 완전히 정의되지 않았음을 명시적으로 나타냅니다. 이는 현재 사양이 img 요소를 사용하는 의사 요소의 동작을 지정하지 않음을 의미합니다.

잠재적 해결 방법: 표준화를 기다리는 중

그러나 이러한 상황이 무기한 지속되지는 않을 수도 있습니다. 사양에서는 의사 요소와 대체 요소 간의 상호 작용이 향후 버전에서 추가로 정의될 것이라고 제안합니다. 이로 인해 우리는 의사 요소가 결국 더 포괄적이고 일관된 방식으로 img 요소에 대해 지원될 것이라는 기대를 갖게 됩니다.

그때까지 img 요소를 사용하여 유사한 효과를 얻으려는 개발자는 다음과 같은 대체 접근 방식을 고려해야 할 수도 있습니다. JavaScript를 사용하거나 img 주위에 추가 래퍼 요소를 생성하는 것과 같습니다.

위 내용은 유사 요소가 CSS의 `` 태그와 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!