[每天进步一点点~] vue笔记（一）css样式中深度作用选择器

在style标签中添加一个scoped属性，可以使css样式只作用于加了scoped属性的vue组件。例如 A.vue 中的<style>标签中加了 scoped 属性，那么<style>标签中的样式只作用于 A.vue

1. scoped作用原理

scpoed 是vue中引入的处理样式的属性，简单理解就是给当前组件样式加一个唯一的属性为组件内的css样式作用域，该属性用data-v-hash 的方式对模块进行标识，当我们在style标签中添加scoped属性后，vue在该组件进行编译后会在组件里面的dom元素中添加data-v-hash属性。具体写法如下：

<template>
  <div data-v-4f513038="" class="test"></div>
</template>
<style scoped>
.text {
  font-size: 20px;
}
</style>

2. 深度作用选择器

如果我们希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用深度作用操作符>>> 。
以elementUI组件中el-button为例，现在我们想从新定义el-button中按钮样式,把样式按钮变成了红色

<template>
  <div class="test">
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<style  scoped>
.test >>> .el-button--primary {
  color: #fff;
  background-color: red;
  border-color: red;
}
</style>

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