當 style 標籤有 scoped 屬性時，它的 CSS 只作用於當前元件中的元素。編譯後代碼如下：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

原理是使用 css 的屬性選擇器，在標籤上設定了 data-v-xxx 屬性，然後 .classname[data-v-xxx] 找到對應樣式。

子元件

使用 scoped 後，父元件的樣式將不會滲透到子元件中。不過一個子元件的根節點會同時受其父元件的 scoped CSS 和子元件的 scoped CSS 的影響。這樣設計是為了讓父元件可以從佈局的角度出發，調整其子元件根元素的樣式。

編譯後 classname 添加了當前元件的選擇器，導致元件內獲取不到樣式。

深度作用選擇器

使用 lang="scss" 的巢狀語法編譯結果：

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子元件，你可以使用 >>> /deep/ ::v-deep 操作符，scope 會新增到操作符的上一個節點，這樣下層就能獲取到樣式。

whosmeya.com