HTML5中的Scoped屬性如何使用

這篇文章主要介紹“HTML5中的Scoped屬性如何使用”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“HTML5中的Scoped屬性如何使用”文章能幫助大家解決問題。

HTML5的變革給我們帶來了大量非常有用的新屬性，比如placeholder, download, hidden，等等。每一種新屬性都給我們帶來了對頁面元素新的控制方法和控制效力

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

復(fù)制代碼

代碼如下:

<style scoped>

/* styles go here */

</style>

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

復(fù)制代碼

代碼如下:

<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="border-color: pink;">

<style scoped>

div { background: lightblue; border: 1px solid blue; }

</style>

<div></div>

</div>

<div></div>

</div>

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

復(fù)制代碼

代碼如下:

<style scoped>

@media only screen and (max-width : 1024px) {

div { background: #000; }

}

</style>

這個(gè)新出現(xiàn)的scoped屬性是非常有用的功能，尤其對那些創(chuàng)作模板的，或CMS用戶，或某些無法操作整個(gè)樣式文件的開發(fā)人員。但需要注意的是，有些老式的瀏覽器上不支持這個(gè)屬性的

關(guān)于“HTML5中的Scoped屬性如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識點(diǎn)。