首頁 > web前端 > css教學 > 為什麼偽元素不能與 CSS 中的 `` 標籤一起使用?

為什麼偽元素不能與 CSS 中的 `` 標籤一起使用?

Patricia Arquette
發布: 2024-12-15 02:59:11
原創
280 人瀏覽過

Why Don't Pseudo-elements Work with `` Tags in CSS?

偽元素和圖像元素:CSS 難題

儘管:before 和:after 在CSS 中具有廣泛的適用性,但它們的影像元素(為什麼偽元素不能與 CSS 中的 `` 標籤一起使用?) 的功能仍然是一個令人費解的例外。如下面的程式碼片段所示,向img 元素添加偽元素不會產生預期的結果:

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash">
登入後複製
img:before {
  content: "hello";
}
登入後複製

雖然它與div 和span 等其他元素無縫協作,但所需的效果是應用於img 元素時不存在。

幕後:CSS規範

CSS 規範揭示了這種差異。它明確指出偽元素和替換元素(包括 HTML 中的 img)之間的交互在當前版本中尚未完全定義。這意味著當前規範沒有指定帶有 img 元素的偽元素的行為。

潛在的解決方案:等待標準化

但是,這種情況可能不會無限期地持續下去。該規範建議偽元素和替換元素之間的交互作用將在未來版本中進一步定義。這讓我們期望 img 元素最終將以更全面和一致的方式支援偽元素。

在那之前,希望使用 img 元素實現類似效果的開發人員可能需要考慮替代方法,例如使用 JavaScript 或在 img 周圍創建額外的包裝元素。

以上是為什麼偽元素不能與 CSS 中的 `` 標籤一起使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板