style標記上新出現(xiàn)的這個scoped屬性可以讓CSS樣式只對局部元素生效撤摸，具體說革半，就是存放這段style樣式的元素的子元素生效医增，跟平常的樣式不一樣的唯一地方就是新加了一個scoped屬性：
代碼如下:
<style scoped>/* styles go here */</style>
具有scoped屬性的樣式只會應用到當前元素和其子元素谆构。Inline樣式仍然比scoped樣式優(yōu)先級高虾攻，所以铡买，最好避免使用inline樣式，下面是將幾種樣式混合到一起比較它們的作用效率范圍：
代碼如下:
<div class="democontain lazy "><div>
<style scoped>
div {
border: 1px solid green; margin-bottom: 20px; min-height: 40px;
}
.democontain {
background: #f8f8f8;
}
</style>
<div style="border-color: pink;"><div>
<style scoped>
div {
background: lightblue; border: 1px solid blue;
}
</style>
在scoped樣式里可以使用任何合法的CSS樣式標記霎箍，比如媒體查詢奇钞，就像下面這樣：
代碼如下:
<style scoped>
@media only screen and (max-width : 1024px) {
div { background: #000; }
}
</style>
這個新出現(xiàn)的scoped屬性是非常有用的功能，尤其對那些創(chuàng)作模板的漂坏，或CMS用戶景埃，或某些無法操作整個樣式文件的開發(fā)人員。但需要注意的是顶别，有些老式的瀏覽器上不支持這個屬性的谷徙。
在vue組件中我們我們經(jīng)常需要給style添加scoped來使得當前樣式只作用于當前組件的節(jié)點。添加scoped之后驯绎，實際上vue在背后做的工作是將當前組件的節(jié)點添加一個像data-v-1233這樣唯一屬性的標識完慧，當然也會給當前style的所有樣式添加[data-v-1233]這樣的話，就可以使得當前樣式只作用于當前組件的節(jié)點剩失。但是我們需要注意的是如果我們添加了子組件屈尼，同樣的，如果子組件也用scoped標識了赴叹，那么在父組件中是不能設(shè)置子組件中的節(jié)點的鸿染。若父組件有scoped，子組件沒有設(shè)置乞巧，同樣涨椒，也是不能在父組件中設(shè)置子組件的節(jié)點的樣式的，因為父組件用了scoped,那么父組件中style設(shè)置的樣式都是唯一的了，不會作用與其他的組件樣式蚕冬，我在用vue-quill-editor富文本編輯器的時候就遇到了這個坑免猾，我只是想讓內(nèi)容區(qū)設(shè)置一個高度，這樣的話，是必須在App.vue中設(shè)置的伍绳，我們App.vue相當于根容器胡桃，沒有設(shè)置scoped，所以是可以設(shè)置的锨苏。
