特別的，有一個新的屬性，它能讓我們控制多個元素的屬性，就是：scoped。style標(biāo)記上新出現(xiàn)的這個scoped屬性可以讓CSS樣式只對局部元素生效，具體說，就是存放這段style樣式的元素的子元素生效，跟平常的樣式不一樣的唯一地方就是新加了一個scoped屬性：
代碼如下:
<style scoped>
/* styles go here */
</style>
具有scoped屬性的樣式只會應(yīng)用到當(dāng)前元素和其子元素。Inline樣式仍然比scoped樣式優(yōu)先級高，所以，最好避免使用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="border-color: pink;">
<style scoped>
div { background: lightblue; border: 1px solid blue; }
</style>
<div></div>
</div>
<div></div>
</div>
在scoped樣式里可以使用任何合法的CSS樣式標(biāo)記，比如媒體查詢，就像下面這樣：
代碼如下:
<style scoped>
@media only screen and (max-width : 1024px) {
div { background: #000; }
}
</style>
這個新出現(xiàn)的scoped屬性是非常有用的功能，尤其對那些創(chuàng)作模板的，或CMS用戶，或某些無法操作整個樣式文件的開發(fā)人員。
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試