中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

特別的，有一個新的屬性，它能讓我們控制多個元素的屬性，就是：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=border-color: pink;>

<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用戶，或某些無法操作整個樣式文件的開發人員。