vue的css深度选择器 deep /deep/

作用及概念

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。在vue中是这样描述的：

处于 scoped 样式中的选择器如果想要做更"深度"的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

举个简单的栗子，假设这里有一个element的组件，我们需要改动它的外边距

javascript 复制代码

        <el-select
          v-model="id"
          placeholder="选择登录"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in users"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

我们可用使用浏览器的f12工具查看元素

可以使用它的类名，但是这样是不行的，因为我们加上了 scope，为了让样式不会污染到其他的组件。

css 复制代码

<style lang="scss" scoped>
    .el-select__wrapper {
         margin-top: 10%;
    }
}

解决方案

通常，会有两种处理方法：

将scoped属性去掉。样式生效了，但是这种写法是作用到全局的，非常容易污染全局样式。这种写法，其实等同于写在全局样式文件中。
保留scoped属性，使用深度选择器，代码如下

我们有4种写法

1、::v-deep

css 复制代码

<!-- 写法1 使用::v-deep -->
<style lang="scss" scoped>
    ::v-deep .el-select__wrapper {
      margin-top: 10%;
    }
}

👆这种写法在vue3已经弃用，用这种写法的话会给出如下警告

$@vue/compiler-sfc$ ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

2、>>> 操作符

css 复制代码

<!-- 写法2 使用>>> 操作符-->
<style lang="scss" scoped>
>>>.el-select__wrapper {
      margin-top: 10%;
}
<style>

👆这种写法在浏览器兼容性问题，所以一般也不推荐使用

3、/deep/

css 复制代码

<!-- 写法3 使用/deep/ -->
<style lang="scss" scoped>
 /deep/.el-select__wrapper {
  margin-top: 10%;
}
<style>

👆这种写法不支持sass预处理器，也不推荐使用

4、:deep(<inner-selector>)

css 复制代码

<style lang="scss" scoped>
    :deep(.el-select__wrapper) {
      margin-top: 10%;
    }
</style>

总结

当我们遇到需要在一个组件中想要影响到子组件，就可以使用深度选择器，而::v-deep 在vue3中已经启用了 /deep/ 和 **>>>**有存预处理器不支持和浏览器兼容为题，综上所述，使用:deep(<inner-selector>)是最佳的解决方案。