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

相关推荐
iCoding915 分钟前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou3311 分钟前
使用 Service Worker 限制请求并发数
前端
张可爱13 分钟前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine15 分钟前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis24 分钟前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络35 分钟前
Vue3 原生移动应用开发来了
前端·javascript·css
GISer_Jing38 分钟前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
我爱学习_zwj1 小时前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花1 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
摆烂工程师1 小时前
什么是 ChatGPT Business 会员?与 ChatGPT Plus 有什么不同?
前端·后端·程序员