深度作用選擇器簡介

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

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述程式碼將會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

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

深度作用選擇器作用

當你不想寫全域性樣式,想寫scoped區域性樣式不汙染全域性,又想更改子元件內的樣式,此時就可以用/deep/深度作用選擇器.滿足你所有想法

一：scoped屬性

1.scoped會給區域性區域的非元件元素和元件根元素(不含元件內子元素)增加一個不重複的data屬性

2.加了scoped後若寫樣式,會在每句css選擇器的末尾（編譯後生成的css語句）加一個當前元件(大的.a)的data屬性選擇器,若多層也是給最後末尾設定

因給.c設定了.a的屬性選擇器,然後.c屬於子元件內的子元素不會增加.a的屬性所以自然獲取不到此元素 樣式無效

//.a為大div父元件 .b為子元件根元素 .c為子元件內的子元素
 

 .a .b .c{//多層
    color:red
  }
  //會渲染成
  .a .b .c[data-v-2311c06a]{
    color:red
  }

二: /deep/深度作用選擇器

當scoped時,#app是父元件 button是子元件內的子元素 [data-v-7ba5bd90]是app的屬性

//渲染前的原始碼 
  #app button{
    background-color: red;
  }
  #app /deep/ button{
    background-color: yellow;
  }

//不加/deep/的渲染效果 樣式無效
#app button[data-v-7ba5bd90] {
    background
 
-color: red;
}
//加了/deep/的渲染效果 樣式有效
#app[data-v-7ba5bd90] button {
    background-color: yellow;
}

• [data-v-7ba5bd90]是app的屬性,button是子元件內的子元素並無此屬性,所以不加/deep/樣式,獲取不到元素,樣式無效

• 加了/deep/後 屬性選擇器跑到前面去了

情況一： 若/deep/後有多層巢狀

//渲染前
  #app /deep/ button{
    background-color: yellow;
    span{
      color:blue;
    }
  }
//渲染後 樣式有效
#app[data-v-7ba5bd90] button span {
    color: blue;
}

情況二：再換種寫法 移動/deep/位置

//渲染前
  #app button{
    /deep/ span{
      color:pink;
    }
  }
//渲染後 data-v-7ba5bd90是#app的屬性 所以無效
#app button[data-v-7ba5bd90] span {
    color: pink;
}

情況三：再換一種 又加個子元素

//渲染前 
  #app button{
    span{
      /deep/ span{
        color:pink
      }
    }
  }
//渲染後
#app button span[data-v-7ba5bd90] span {
    color: pink;
}

綜上可以看出.在哪裡加的/deep/ ,data屬性選擇器就會跑到寫的上一層去.

情況四：若寫多個/deep/

多個/deep/的情況下,只有最外層的/deep/有效,內層的其他/deep/都是無效的,寫了也沒意義,不建議寫.

//渲染前
  #app /deep/ button{
    /deep/ span{
        color:yellow
    }
  }
//打包後的樣式顯示
#app[data-v-7ba5bd90] button /deep/ span {
    color: yellow;
}