/deep/和＞＞＞和::v-deep 之间的关系

最新推荐文章于 2024-03-29 17:46:03 发布
原创 最新推荐文章于 2024-03-29 17:46:03 发布 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #javascript

本文介绍了在Vue中使用 scoped 属性时，如何穿透组件样式隔离，修改Element-UI等库的深层元素样式。通过/deep/或::v-deep选择器，可以达到目标，但在Vue 3.0中/deep/已不推荐。文章提供了解决方法，包括使用::v-deep和创建无scoped的style。同时，也提到了 Sass/less 下的处理方式，并建议读者学习更多样式穿透技巧。

在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如

.conBox /deep/ .el-input__inner{
    padding:0 10px;
}

注意，/deep/在vue 3.0会报错
如果/deep/报错，可采用::v-deep，效果基本一样，::v-deep能加快编译速度，但是网络上资料很少。

.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}

深度作用选择器 >>>
（注意，只作用于css）
但如果是sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。
想修改element-ui某个深层元素也有其他方式解决；
解决方法之一：除非你将 scoped 移除，或者新建一个没有 scoped 的 style（一个.vue文件允许多个style）
老铁们，积累从点滴做起！学废了吗~

vue路由的钩子函数有哪些？都做了哪些事情？
孙叫兽的博客
11-18 4028
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 路由的钩子函数总结有6个 全局的路由钩子函数：beforeEach、after...
VUE -- 基础知识讲解（三）
最新发布
qq_25329389的博客
07-31 1265
本文系统总结了Vue开发中的关键知识点：1）组件生命周期顺序：父组件优先创建，子组件优先挂载；2）keep-alive组件缓存机制及Vue3中的使用变化；3）从零搭建Vue项目的完整流程，包括插件引入、规范配置和目录结构；4）最佳实践建议，涵盖编码风格、性能优化和安全性；5）Vuex状态管理的核心概念和使用场景；6）模板编译为render函数的过程；7）Vue实例的挂载机制。文章通过理论解析、实践指导和源码分析相结合的方式，为Vue开发者提供了全面的技术参考。
解决vue项目中重复点击导航路由报错
gengtieguang的博客
11-29 779
vue版本 “vue”: “^2.6.11”, 主要代码 //重复点击导航路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 配置文件[router文件 下index.js] router > index.js
修改element-ui某个深层元素
weixin_46852620的博客
01-30 478
在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如 .conBox /deep/ .el-input__inner{ padding:0 10px; } 注意，/deep/在vue 3.0会报错, 如果/deep/报错，可采用::v-deep，效果基本一样 .conBox ::v-deep .el-input__inner{ padding:0 10px; } 深
/deep/ 、＜＜＜ 、::deep
weixin_55782474的博客
04-15 1088
改变element-ui某个深层元素或其他深层样式方法 一、方法一： 1、/deep/ 在vue.3.0会报错，可用 ::deep 2、>>> ：深度作用选择器。只作用于css 如果是sass/less的话可能无法识别，这时候使用 /deep/和::v-deep 选择器 二、方法二 移除scoped，新建一个没有scoped的style。一个vue文件允许多个style ...
css /deep/、 v-deep、:deep这三个效果一样的用法
jjw_zyfx的博客
10-09 6356
基本意思就是，一个组件会被多个地方使用，但是有些地方可能需要的样式不太一样，比如一个地方需要红色背景，而另外一个地方可能需要蓝色背景，假设第一个地方已经是红色背景了，我想在第二个地方用时改成蓝色，这是如果直接通过全局修改样式则会影响到第一个的背景样式，但是我的本意并不是修改第一个地方的，而是只修改第二个地方的，这个时候就可以在第二个用到样式的前边添加上一个/deep/ 第一个的跟样式{} 在对象中...
深度选择器/deep/、::v-deep、:deep的区别
qq_53911056的博客
03-29 4822
深度选择器/deep/、::v-deep、:deep，三个选择器都是用于穿透组件作用域并样式化子组件内部元素的。在 Vue.js 2中，可能更倾向于使用 /deep/；而在 Vue.js 3中，应该使用 ::v-deep 或其别名 :deep......
Vue-怀旧经典-指令
黄黄黄一边敲代码一边写出来的博客
05-02 227
Vue-怀旧经典-指令 1.自定义指令 （1）自定义指令介绍directives——对普通DOM元素进行底层操作 //注册一个全局自定义指令`v-focus` Vue.directive('focus',{ //当被绑定元素插入到dom中时…… inserted: function(el){ //聚焦元素 el.focus() } }) 如果想注册局部指令，组件中也接受一个directives的选项： directives:{ focus:{ //指令的定义 inserted:fu
浅识深度选折器（/deep/ 或＞＞＞）
qq_45768871的博客
08-23 512
之前在开发中遇到一个问题，vue项目结合element ui使用。 但是element ui的样式不一定符合我们的需求，这时我们就需要改变它的样式。 比如博主使用到了element ui的表格，但是表格有默认的背景色，鼠标滑过还有默认的高亮颜色。 我想要改变这个鼠标滑过的样式，所以我需要在页面中审查元素找到对应的标签。 但是当我找到并且复制，然后试图去改变它的样式时，怎么都没办法改变。 我以为是权重的问题，所以我加 ! important，但是也毫无作用。 当我审查元素发现此样式就没有作用到，就相当于它没有
/deep/
mlfdgs的博客
08-07 262
/deep/可以修改子组件的样式
/deep/ 深度选择器
qq_35409319的博客
11-14 1583
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。 <-- less语法 --> .wrap{ .class1{ font-size:12px; } /deep/ .class2{ font-size:20px; //对所有...
深度作用操作符 /deep/
李公子的博客
09-14 1745
组件的样式作用域 在组件中的style标签中默认是全局样式 我们在组件使用style设置了HelloWorld组件中元素的样式 HelloWorld组件内容 在父组件中给子组件内部元素添加样式 有作用域的组件 如果不希望当前组件中的样式影响到别的组件，我们可以添加作用域 在有作用域的组件中给子组件设置样式 默认只能作用到子组件的根节点上 使用子组件根节点本身的class类名 ...
深度选择器 /deep/
weixin_45379180的博客
05-19 562
css 无法添加样式 – > 深度选择器 /deep/ 用于解决 富文本内 图片样式无法给到 子组件 样式无法给到的情况下` 在这里插入代码片` /deep/ #conts img { width: 100%; }
::v-deep
weixin_55020138的博客
11-19 1698
当我们需要覆盖组件库中的样式时大多数情况只能通过深度作用选择器，::v-deep就是其中一种深度作用选择器。，vuetify等，虽然配好了样式但是有时候我们仍然需要根据需求更改样式。vue样式穿透 ::v-deep的具体使用。所以接下来主要介绍::v-deep的使用。在用到很多vue的组件库如vant，
css深度选择器 /deep/
zhou_xiaozhou的博客
01-10 8883
css深度选择器 /deep/
& /deep/用意
gaoyu007的博客
12-13 672
当前页面内修改公用组件样式或父组件页面内修改子组件样式
/deep/ 深度选择器的使用
m0_49373551的博客
11-20 660
使用场景： 我们使用/deep/ 深度选择器最主要的使用场景就是 要跨越 scoped 的限制 使用方式 <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App' } </script> <style lang="less" scoped > /d
css关于/deep/的解释和用法
热门推荐
zy_leslie的博客
06-26 1万+
/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样...
deep的用法
weixin_43206442的博客
01-07 3842
deep
/deep/ ::v-deep :deep这三个的区别
03-08
<think>好的，我现在需要回答用户关于Vue中CSS深度选择器/deep/、::v-deep和:deep()的区别及使用场景的问题。首先，我得回忆一下自己对这些选择器的了解，并查阅提供的引用资料来确保准确性。 用户提到的三个选择器：/deep/、::v-deep和:deep()。根据引用[1]和[2]，这些选择器都是用于Vue中的样式穿透，即在scoped样式中修改子组件的样式。Vue的scoped样式通过添加data属性来限制样式作用域，但有时候需要覆盖子组件样式，这时候就需要深度选择器。 首先，我需要理清每个选择器的演变过程。根据引用[1]，早期的Vue版本使用>>>，但在Sass等预处理器中可能有问题，所以转而使用/deep/。后来Vue推荐使用::v-deep，而Vue3则引入了:deep()作为官方推荐方式。引用[2]也提到，Vue3建议使用:deep()，避免使用旧语法。 接下来，各个选择器的使用场景和兼容性。例如，/deep/在Vue2中可能有效，但有兼容性问题；::v-deep在Vue2中常用，但Vue3更推荐:deep()。此外，引用[3]中的代码示例显示，在Vue项目中，使用scoped样式时，可以通过/deep/或::v-deep来穿透子组件样式。 需要注意语法差异，比如在Vue3中，:deep()需要作为伪类函数使用，包裹目标选择器，如.parent :deep(.child)。而旧的写法可能包括::v-deep .child或/deep/ .child，这些在Vue3中可能不被推荐，甚至会有警告或错误。 还需要比较它们的语法结构，例如/deep/是作为组合器使用，而::v-deep是伪元素，后来调整为伪类函数:deep()。这些语法变化可能与CSS预处理器（如Sass）的兼容性有关，这也是为什么Vue3推荐新语法的原因之一。 最后，总结它们的区别和使用场景，强调Vue版本的影响，以及如何在不同版本中选择合适的深度选择器。同时，要提到在Vue3中避免使用已废弃的语法，遵循官方推荐，以确保代码的可维护性和兼容性。 在回答过程中，需要引用提供的资料来支持每个观点，例如引用[1]说明演变过程，引用[2]强调Vue3的推荐方式，引用[3]展示代码示例。同时，要确保语言简洁明了，结构清晰，帮助用户理解不同选择器之间的关系和正确用法。</think>### Vue CSS深度选择器区别与使用场景 --- #### **1. 核心区别** | 选择器 | 语法类型 | Vue版本支持 | 官方推荐度 | 预处理器兼容性 | |---------------|-------------------|-------------|------------------|----------------------| | `/deep/` | 组合器 | Vue2 | 不推荐（已废弃） | 部分支持，存在兼容问题[^3] | | `::v-deep` | 伪元素 | Vue2 | 过渡方案 | 较好，但需注意写法 | | `:deep()` | 伪类函数 | Vue3 | 官方推荐 | 完全支持 | --- #### **2. 演变过程** 1. **早期方案** - `>>>`：原生CSS穿透，但Sass/Less等预处理器无法解析[^1] - `/deep/`：Vue2的替代方案，但存在兼容性警告 ```css /* Vue2旧写法（已废弃） */ .parent /deep/ .child { color: red; } ``` 2. **过渡阶段** - `::v-deep`：Vue2推荐写法，伪元素形式 ```css /* Vue2推荐写法 */ .parent::v-deep .child { color: red; } ``` 3. **Vue3标准化** - `:deep()`：伪类函数，包裹目标选择器，**必须配合父级使用** ```css /* Vue3唯一推荐写法 */ .parent :deep(.child) { color: red; } ``` --- #### **3. 关键使用场景** 1. **修改第三方组件样式** 当使用`<el-dialog>`等组件库时，穿透修改内部元素样式： ```css /* Vue3正确写法 */ .my-dialog :deep(.el-dialog__header) { background: #f0f0f0; } ``` 2. **Scoped样式穿透** 在`<style scoped>`中覆盖子组件样式： ```vue <style scoped> .wrapper :deep(.button) { padding: 12px; /* 覆盖子组件的.button样式 */ } </style> ``` 3. **避免全局样式污染** 相比`<style>`无scoped声明，深度选择器能精确控制作用域。 --- #### **4. 常见错误示例** - **错误1：直接使用`>>>`** ```css /* 预处理器编译可能失败 */ .parent >>> .child { color: red; } ``` - **错误2：Vue3中使用旧语法** ```css /* Vue3中会警告 */ .parent::v-deep .child { color: red; } ``` - **正确实践** ```css /* Vue3标准写法 */ .parent :deep(.child) { color: red; } ``` --- #### **5. 版本迁移建议** 1. **Vue2项目** - 使用`::v-deep`（伪元素形式） - 逐步替换现有的`/deep/`写法 2. **Vue3项目** - **强制使用`:deep()`** - 通过ESLint插件检测废弃语法 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值