「style」元素的「scoped」屬性在 HTML5 中仍然相關嗎？

HTML5 中樣式元素的作用域屬性的目前狀態是什麼？

背景

HTML5 最初提出了樣式的作用域屬性元素，旨在將樣式的應用限制於樣式元素的父元素及其後代。然而，由於瀏覽器實作有限，該功能最終被刪除。

目前狀態（2023）

目前，不含scoped屬性的樣式元素可以合法地出現在文件中的任何位置。但是，規格警告其他文檔元素可能會意外重新樣式化。

作用域樣式的解決方案

儘管缺乏作用域屬性支持，但仍然可以透過使用明確選擇器來實現作用域樣式，例如作為 ID 選擇器。以下是範例：

<code class="html"><div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div></code>

此方法可確保樣式僅套用於指定的 div 元素內。它需要避免 ID 衝突，但這已經是最佳實踐。

未來的 Outlook

截至目前，沒有跡象表明在 HTML 中重新引入了作用域屬性。顯式選擇器方法仍然是實現作用域樣式的建議技術。

以上是「style」元素的「scoped」屬性在 HTML5 中仍然相關嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！