deep 深度选择器与修改 element-ui 样式 - YuHo Blog

Scoped Css

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它通过使用 PostCSS 来实现以下转换：

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

由转换结果可见，每一个类名都加上了 hash 值，使样式只作用于当前组件。

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

在全局 css 文件中重写覆盖的样式，为了不污染全局样式，可以加个单独的类名

这是 vue-loader 提供的一种写法，如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

1
2
3

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

上述代码将会编译成：

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

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

<style scoped lang="scss">
　　.form {
　　　　background-color: #fff;
　　　　/deep/ .list{
　　　　　　font-size: 18px;
　　　　}
　　}
</style>