HTML5中的Scoped屬性使用方法

這篇文章主要介紹“HTML5中的Scoped屬性使用方法”，在日常操作中，相信很多人在HTML5中的Scoped屬性使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5中的Scoped屬性使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

特別的，有一個新的屬性，它能讓我們控制多個元素的屬性，就是：scoped。style標記上新出現的這個scoped屬性可以讓CSS樣式只對局部元素生效，具體說，就是存放這段style樣式的元素的子元素生效，跟平常的樣式不一樣的唯一地方就是新加了一個scoped屬性：

代碼如下:

<style scoped>
   /* styles go here */
</style>

具有scoped屬性的樣式只會應用到當前元素和其子元素。Inline樣式仍然比scoped樣式優先級高，所以，最好避免使用inline樣式，下面是將幾種樣式混合到一起比較它們的作用效率范圍：

代碼如下:

<div class="democontain lazy ">
<style scoped>
 div { border: 1px solid green; margin-bottom: 20px; min-height: 40px; }
 .democontain { background: #f8f8f8; }
</style>
<div></div>
<div >
 <style scoped>
  div { background: lightblue; border: 1px solid blue; }
 </style>
 <div></div>
</div>
<div></div>
</div>

在scoped樣式里可以使用任何合法的CSS樣式標記，比如媒體查詢，就像下面這樣：

代碼如下:

<style scoped>
@media only screen and (max-width : 1024px) {
div { background: #000; }
}
</style>

這個新出現的scoped屬性是非常有用的功能，尤其對那些創作模板的，或CMS用戶，或某些無法操作整個樣式文件的開發人員。但需要注意的是，有些老式的瀏覽器上不支持這個屬性的，在這種時候，你也許需要使用jQuery插件（https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin）來彌補這種問題。

到此，關于“HTML5中的Scoped屬性使用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！