描述

在vue开发中,我们难免会去修改一些ui框架的样式，就我个人而言，会经常去修改Element的默认样式，使得它能与我的项目风格更贴切，于是就有了下面的问题

在最近的开发中，我发现我的deep深度选择器失效了，起初以为是我的开发环境出现了问题，经>>>、/deep/、deep()尝试无果后，改用class标签去处理Element UI的组件样式，但是今天刷帖偶然发现大佬说的一句话 如果App.vue中没有这个根节点，那么:deep()不起作用，我把根节点加上，:deep()样式就生效了,使我顿时醒悟，在组件除<template>标签以外，代码中需要自定义一个根节，这样深度选择器才能够正确的找到他们,下面是一个例子：

<templlate>
    ...
    <el-dialog ...>
    ...
    </el-dialog>
    ...
</templlate>

<style scoped>
   :deep(.el-dialog){
    ...
    }
<style>

这样的写法，deep是无法选中el-dialog的，也就无法使得自定义的样式生效，所以应该在最外部加一层标签

<templlate>
    <div>
        ...
        <el-dialog ...>
        ...
        </el-dialog>
        ...
    </div>
</templlate>

最外层加上div之后，选择器能够正常工作