Vue 深度選擇器

2021-10-08 06:45:18 字數 664 閱讀 7047

在使用vue的時候,為了避免元件之間相互影響,可以在樣式中加入乙個css樣式。
但是這樣的直接壞處是父元件的樣式不會滲透到子元件中去。

vue提供了深度作用選擇器可以解決這個問題:

="aa"

>

首頁<

/a-breadcrumb-item>

<

/a-breadcrumb>

text

<

/a-button>

<

/div>

<

/template>

此時想讓text變成紅色,你會發現並沒有改變

如果使用了深度選擇器 就會改變**。>>>**

但是如果使用sass也是不可以解析的。需要使用**/deep/**才可以。

這樣是沒有效果的 需要寫成這樣 才可以。

```css

Vue 中深度選擇器

vue元件編譯後,會將 template 中的每個元素加入 data v x 屬性來確保 style scoped 僅本元件的元素而不會汙染全域性,但是如果引用了第三方框架,第二層開始就不會起作用了。作用css deep 作用less sass 修改disabled的樣式 remarks is di...

vue deep 深度選擇器

在vue中,如果css加上了scoped作用域,生成的css會加上作用域屬性,如 el form data v a3ccadca el input inner data v a3ccadca el input inner是子元件el input內部生成的,並無 data v a3ccadca 屬性,...

vue deep 深度選擇器

這裡我們先貼乙個官網的說法 vue loader.vuejs.org guide scope 含義大概是 能夠穿透並影響子元件的樣式。我們知道在vue元件中樣式中新增 scoped,那麼這個樣式就會被設定為只影響這個vue元件內的內容 假定某個vue元件又引用了element ui 亦或者其他ui元...