深度作用选择器

在 Vue 的开发中，我们经常会用到外部组件库，例如 element，当使用 element 组件库中的某一个组件的时，我们可能会希望有一些定制的地方，通常的做法是 用CSS 覆盖，但是我们在这个页面的css作用域是 scoped，当 <style> 标签有 scoped属性时，它的 CSS 只作用于当前组件中的元素。 所以直接在有作用域 style 标签中添加 CSS 是无法生效的。如下示例：

通常情况：

<template>
    <div class="container">
      <h1>Title</h1>
      <ele-list/>
    </div>
<template>

<!-- ele-list -->
<template>
    <ul>
        <li class="ele-item">custom</li>
    </ul>
</template>

<style scoped>
.ele-item {
 font-size: 12px;
}
</style>

需要重写组件的情况
模板文件：

<template>
    <div class="container">
      <h1>Title</h1>
      <ele-list/>
    </div>
<template>

<style scoped>
.ele-item {
 font-size: 16px;
}

组件：

<!-- ele-list -->
<template>
    <ul>
        <li class="ele-item">custom</li>
    </ul>
</template>

<style scoped>
.ele-item {
 font-size: 12px;
}
</style>

按照上面的写法，是影响不到子组件的，因为生成的 HTML代码是这样的：

<div data-v-f3f3eg9 class="container">
  <h1>Title</h1>
    <ul>
    <li data-v-0bd8786c class="ele-item">custom</li>
    </ul>
</div>

.container .ele-item[data-v-f3f3eg9] {
    font-size: 12px;
}

通常这种情况下可以有三种方式去解决这个问题：

混用本地和全局样式：

可以在一个组件中同时使用有作用域和无作用域的样式：

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

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

深度作用选择器

如果不想混用本地和全局样式，可以让scoped 样式中的一个选择器能够作用得“更深”，从而影响子组件，此时可以使用 >>> 操作符：

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

上述代码将会编译成：

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

此时上方的代码我们可以写成：

<template>
    <div class="container">
      <h1>Title</h1>
      <ele-list/>
    </div>
<template>

<style scoped>
.container >>> .ele-item {
 font-size: 16px;
}
</style>

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

<style scoped>
.container /deep/ .ele-item {
 font-size: 16px;
}
</style>