vue學習（十五） >>>或/deep/或::v-deep深度作用選擇器作用及使用

深度作用選擇器簡介

如果你希望 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; }