CSS scoped下的深度作用選擇器

在vue中

css作用域中如果添加 scoped 屬性

那這些樣式就 隻能作用于目前元件

不能直接操作子元件的樣式

比如

<template>
  <div id="app">
    <el-input v-model="text" class="text-box"></el-input>
  </div>
</template>

<style scoped>
	#app input {
		background:#fff;
	}
</style>

           

這時 el-input 元件中的input是擷取不到這個樣式的

處理方法:

使用 深度作用選擇器

通過穿透元件作用子元件的樣式

<template>
<style scoped>
	#app >>> input {
		background:#fff;
	}
</style>
           

這個是普通css 作用域的文法

如果是sass或less這種預編譯文法

則 不支援 >>> 這種形式

有另外一種形式支援: /deep/

<style lang="less" scoped>
#app {
  /deep/ input {
    background:#fff;
  }
}
</style>