vue deep 深度選擇器

2021-10-05 04:04:09 字數 584 閱讀 1861

這裡我們先貼乙個官網的說法: vue-loader.vuejs.org/guide/scope… 含義大概是:能夠穿透並影響子元件的樣式。

我們知道在vue元件中樣式中新增 scoped,那麼這個樣式就會被設定為只影響這個vue元件內的內容 假定某個vue元件又引用了element-ui 亦或者其他ui元件,此時 ui不滿意element-ui的樣式,想要在這個頁面微調下element-ui的頁面。但不能影響全域性element-ui元件樣式。那麼我們就需要使用/deep/ 來穿透scoped。

& /deep/ .el-input--small .el-input__inner

複製**

1: 由於deep是vue-loader中的標準。並不是現行的 css標準。無論是 vue-cli2 中的static資料夾以及vue-cli3中的public資料夾都是僅僅執行了copy_webpack_plugin 所以兩者中的css不能使用/deep/選擇器。

2:deep不可以巢狀使用。巢狀使用的話,內層的deep不會被正確打包

& /deep/ .ismodify

}

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 深度選擇器

在使用vue的時候,為了避免元件之間相互影響,可以在樣式中加入乙個css樣式。但是這樣的直接壞處是父元件的樣式不會滲透到子元件中去。vue提供了深度作用選擇器可以解決這個問題 aa 首頁 a breadcrumb item a breadcrumb text a button div templat...

Vue 中深度選擇器

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