當我們使用Vue進行開發時，經常會遇到使用的樣式不僅會應用于當前組件，而且會改變其他的組件的樣式。這個問題可能是初學者經常會遇到的。Vue提供了解決這個問題的方法-Style作用域。

Style作用域使得父級組件的樣式能夠影響子組件。使用scoped屬性，Vue會自動生成一個唯一的屬性作為class或者Selector。這個類或者選擇器將僅在組件內部使用樣式時生效，每個組件的作用域都是獨立的。

上面的例子中，雖然外部的組件里也有一個h1標簽，但是因為內部的樣式只作用于組件內部，所以外部的h1標簽沒有變色。

可以使用Vue Dev tools來觀察作用域內的樣式規則。

如果需要為其它組件添加樣式，我們可以使用`/deep/`或者>>>這樣的“深度作用選擇器”。例如：

上例中，.icon需要應用到/button的子組件中，這時候就可以用>>>或者/deep/，來使得樣式生成時穿透多層的DOM元素進行匹配。

局限性：scoped僅僅影響同一個vue組件內的元素。如果是子組件的元素，需要注意要使用>>>或者deep。

除了scoped，Vue還提供了許多其他的CSS處理方式，例如鉤子函數,內聯樣式和CSS Modules。在選擇合適的CSS解決方案時，需要權衡不同方案的優勢和限制。