Vue 中深度選擇器

2021-10-13 14:19:12 字數 488 閱讀 8585

vue元件編譯後,會將 template 中的每個元素加入 [data-v-***x] 屬性來確保 style scoped 僅本元件的元素而不會汙染全域性,但是如果引用了第三方框架,第二層開始就不會起作用了。

>

>

> 作用css

/deep/ 作用less/sass

//修改disabled的樣式

.remarks >>>.is-disabled .el-input__inner

// 修改placeholderd的樣式

.remarks >>> .el-input__inner::-webkit-input-placeholder

"scss" scoped>

.select

}<

/style>

Vue 深度選擇器

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

VUE中的scoped屬性和深度選擇器

眾所周知,在vue中我們在style標籤中寫樣式時,為了防止當前元件或頁面的樣式對外界其它的頁面元件造成影響,會給vue中的 style標籤 加上 scoped 屬性,該屬性使樣式變成了局域樣式,只作用於當前元件。vue中的scoped屬性的設計思想就是讓當前元件的樣式不會修改到其它 地方的樣式。原...

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 屬性,...