vue 深度選擇器 >>> 或 /deep/ 或 ::v-deep


深度作用選擇器簡介

如果你希望 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/都是無效的,寫了也沒意義,不建議寫.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM