首頁 > web前端 > H5教程 > HTML5中的Scoped屬性使用實例_html5教學技巧

HTML5中的Scoped屬性使用實例_html5教學技巧

WBOY
發布: 2016-05-16 15:47:55
原創
1333 人瀏覽過

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

複製程式碼
程式碼如下:


程式碼如下:



具有scoped屬性的樣式只會套用到目前元素和其子元素。 Inline樣式仍然比scoped樣式優先權高,所以,最好避免使用inline樣式,以下是將幾種樣式混合到一起比較它們的作用效率範圍:
複製程式碼

程式碼如下:









在scoped樣式裡可以使用任何合法的CSS樣式標記,例如媒體查詢,就像下面這樣:

複製程式碼

程式碼如下:


這個新出現的scoped屬性是非常有用的功能,尤其是對那些創作模板的,或CMS用戶,或某些無法操作整個樣式文件的開發人員。但要注意的是,有些老式的瀏覽器上不支援這個屬性的,在這種時候,你也許需要使用jQuery插件(

https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin )來彌補這種問題。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板