This post was updated 577 days ago and some of the ideas may be out of date.

问题描述

<template>
  <div class="input">
    <el-input type="textarea" v-model="content"/>
  </div>
</template>

<style scoped lang="scss">
.input {
  .el-textarea {
    textarea {
      border: none;
    }
  }
}
</style>

以上代码编译结果,textarea标签是element组件生成的,加了[data-v-dd074dc4]选择器所以不会生效

.input .el-textarea textarea[data-v-dd074dc4] {
  border: none;
}

解决方法

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

目前(2022/11/21)最新版Vue3使用::v-deep 操作符会提示:

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.

原因是::v-deep操作符已经被弃用,改为:deep(expression)操作符即可:

.a .b:v-deep { /* ... */ }

// 修改为

.a :deep(.b) { /* ... */ }

参考:https://vue-loader.vuejs.org/zh/guide/scoped-css.html