Vue 深度选择器原理

Vue 编辑模板的时候 如果 <style scoped> Vue会在最后一个选择器后面加上组件的实例标识

<template>
  <div class="parent" id="app">
    <h1>我是父组件</h1>
    <div class="gby">
      <p>我是一个段落</p>
    </div>

    <child></child>
  </div>
</template>

<style scoped>
  .parent {
    background-color: green;
  }

  .gby p {
    background-color: red;
  }
</style>

<template>
    <div class="child">
        <h1>我是子组件</h1>
        <div class="dyx">
            <p>我是子组件的段落</p>
        </div>
    </div>
</template>

<style scoped>
    .child .dyx p {
        background-color: blue;
    }
</style>

转换后相当于

<template>
  <div class="parent" id="app" data-v-e0f690c0="" >
    <h1 data-v-e0f690c0="" >我是父组件</h1>
    <div class="gby" data-v-e0f690c0="" >
      <p data-v-e0f690c0="" >我是一个段落</p>
    </div>

    <child data-v-e0f690c0="" ></child>
  </div>
</template>

<style scoped>
  .parent[data-v-e0f690c0] {
    background-color: green;
  }

  .gby p[data-v-e0f690c0] {
    background-color: red;
  }
</style>

<template>
    <div class="child" data-v-32d296d4="" >
        <h1 data-v-32d296d4="" >我是子组件</h1>
        <div class="dyx" data-v-32d296d4="" >
            <p data-v-32d296d4="" >我是子组件的段落</p>
        </div>
    </div>
</template>

<style scoped>
    .child .dyx p[data-v-32d296d4] {
        background-color: blue;
    }
</style>

这个时候如果引用了elementUI 组件库并且想修改其中 的样式的时候 就有可能会修改不成功，因为vue 不会给组件库内部标签上加上特有的组件实例标识，但是你想修改组件库本身的样式就得写在vue组件中style中,写进去后vue 就会为这个类加上自身的标识 就导致选择不上这个选择器

解决方案就是再修改的这个类名前面加上深度选择器::v-deep ,因为Vue不会为深度作用选择器后面的选择器单元增加 属性选择器[data-v-实例标识]，所以，后面的选择器单元能够选择到子组件及后代组件中的元素

www.jianshu.com/p/7588cfc9a…