深度作用選擇器deep的應用

2021-10-09 22:02:51 字數 589 閱讀 3120

什麼是深度作用選擇器

當前元件a 引入乙個其他元件b做應用,a元件由於scoped作用,a元件本身的全部html標籤都會包含乙個 data-v-*** 的屬性名稱,使得css樣式達到私有效果。被使用的元件b由於某些原因,編譯解析後各個html標籤不會形成 data-v-*** 的屬性,這樣在元件a中給元件b設定樣式會導致無效。

解決

a是元件a的選擇器,b是元件b的選擇器,它們會形成如下效果:

.a[data-v-f3f3eg9] .b

這樣.b的css樣式就生效了。

注意

某些情況下>>>符號有可能無法正確解析,可以替換為別名/deep/::v-deep

深度作用選擇器的左邊必須是當前元件的css選擇器,右邊是子元件標籤選擇器。

scope與 deep 深度選擇器

當 hi 轉換結果 hi 使用scoped後,父元件的樣式將不會滲透到子元件中。不過乙個子元件的根節點會同時受其父元件的 scoped css 和子元件的 scoped css 的影響。這樣設計是為了讓父元件可以從布局的角度出發,調整其子元件根元素的樣式。如果你希望scoped樣式中的乙個選擇器能夠...

deep 深度選擇器,修改Vant 內部的樣式

做vue專案中,遇到對vant的樣式修改,但是修改無法修改。使用 deep 深度選擇器 deep 的意思大概為深入的,深遠的。無意中看到css中有關於這種寫法,開始沒太注意 以為是元件css的寫法,後來才發現不是。我們都知道scoped css規範是web元件產生不汙染其他元件,也不被其他元件汙染的...

CSS scoped下的深度作用選擇器

在vue中 css作用域中如果新增scoped屬性 那這些樣式就只能作用於當前元件 不能直接操作子元件的樣式 比如 text class text box el input div template background fff style 這時 el input 元件中的input是獲取不到這個樣...