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%;
    }
}

解决方案

通常,会有两种处理方法:

  1. 将scoped属性去掉。样式生效了,但是这种写法是作用到全局的,非常容易污染全局样式。这种写法,其实等同于写在全局样式文件中。

  2. 保留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>)是最佳的解决方案。

相关推荐
遂心_4 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit4 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天4 小时前
ts中的函数重载
前端
卓伊凡4 小时前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy4 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy4 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼4 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍4 小时前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子5 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院5 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc