HTML5中的Scoped屬性使用實(shí)例

特別的,有一個(gè)新的屬性,它能讓我們控制多個(gè)元素的屬性,就是:scoped。style標(biāo)記上新出現(xiàn)的這個(gè)scoped屬性可以讓CSS樣式只對(duì)局部元素生效,具體說(shuō),就是存放這段style樣式的元素的子元素生效,跟平常的樣式不一樣的唯一地方就是新加了一個(gè)scoped屬性:
<style scoped>
/* styles go here */
</style>
具有scoped屬性的樣式只會(huì)應(yīng)用到當(dāng)前元素和其子元素。Inline樣式仍然比scoped樣式優(yōu)先級(jí)高,所以,最好避免使用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>
這個(gè)新出現(xiàn)的scoped屬性是非常有用的功能,尤其對(duì)那些創(chuàng)作模板的,或CMS用戶,或某些無(wú)法操作整個(gè)樣式文件的開(kāi)發(fā)人員。但需要注意的是,有些老式的瀏覽器上不支持這個(gè)屬性的,在這種時(shí)候,你也許需要使用jQuery插件(https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin)來(lái)彌補(bǔ)這種問(wèn)題。
相關(guān)文章
- 使用HTML5+jQuery添加鼠標(biāo)懸浮音響效果,兼容Firefox 3.5+, Chrome 3+等等,使用html5的audio元素,隨機(jī)播放一個(gè)mp3音效,需要的朋友可以參考下2014-04-23
html5表單提交按鈕圓形進(jìn)度條加載動(dòng)畫
一款modernizr html5表單提交按鈕圓形進(jìn)度條加載動(dòng)畫表單驗(yàn)證效果2014-04-22- 這篇文章主要介紹了html5菜單折紙效果,類似獵豹瀏覽器安裝時(shí)的用戶須知效果,需要的朋友可以參考下2014-04-22