/deep/可以翻譯為深入的，深遠的?？吹角岸舜罄性赾ss中有關(guān)于這種寫法，開始沒太注意，以為是框架自帶的寫法，后來發(fā)現(xiàn)不是。

scoped介紹

為了vue頁面樣式模塊化，不對全局造成污染，給每個頁面的<style>標簽加上scoped屬性，表示它的 CSS 只作用于當前組件中的元素。這類似于 Shadow DOM 中的樣式封裝。它有一些注意事項，但不需要任何 polyfill。它通過使用 PostCSS 來實現(xiàn)以下轉(zhuǎn)換

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

轉(zhuǎn)換后：

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

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

scoped優(yōu)缺點

優(yōu)點：使用 scoped后，父組件的樣式將不會滲透到子組件中。

缺點：使用scoped也會造成一些額外的負擔，如無法覆蓋原有組件的樣式。

解決方法：使用深度選擇器，將scoped樣式中的選擇器“深入”，即影響子組件

深度作用選擇器

如果你希望 scoped樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：

<style scoped>
    .left >>> .ivu-collapse-item {
        position: relative;
        border-top: 1px solid transparent;
    }
</style>

上述代碼將會編譯成：

.left[data-v-f3f3eg9] .ivu-collapse-item {
    position: relative;
    border-top: 1px solid transparent;
}

有些像 Sass或Less 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

<style scoped>
    .left /deep/ .ivu-collapse-item {
        position: relative;
        border-top: 1px solid transparent;
    }
</style>

注意

通過 v-html 創(chuàng)建的 DOM 內(nèi)容不受 scoped 樣式影響，但是你仍然可以通過深度作用選擇器來為他們設(shè)置樣式。