深度作用選擇器簡介
如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”,例如影響子組件,你可以使用 >>> 操作符:
有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名,同樣可以正常工作。
一:scoped屬性
1.scoped 會給局部區域的非組件元素和組件跟元素(不含組件內子元素)增加一個不重復的data屬性
2.加了scoped 后若寫樣式, 會在每句 css 選擇器末尾(編譯后生成的css語句)加一個當前組件(大的 .a)的data屬性選擇器,若多層也是給最后末尾設置
二: /deep/深度作用選擇器
當scoped時,#app是父組件 button是子組件內的子元素 [data-v-7ba5bd90]是app的屬性
在哪里加的/deep/ ,data屬性選擇器就會跑到寫的上一層去.
多個/deep/的情況下,只有最外層的/deep/有效,內層的其他/deep/都是無效的,寫了也沒意義,不建議寫.
