css关于/deep/和>>>和::v-deep的解释和用法
/deep/和>>>和::v-deep
我们在style lang="scss"时经常用scoped属性实现组件样式私有化的时候,要改变element-ui某个深层元素(eg:.el-input__inner)或其他深层样式时,需要使用/deep/,比如:
.conBox /deep/ .el-input__inner{padding:0 10px; }
注意,VUE3.0下/deep/的使用可能会有报错
如果/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组件中,在style设置为scoped的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以使用 /deep/ 深度选择器。
<-- less语法 -->
.wrap{
.class1{
font-size:12px;
}
/deep/ .class2{
font-size:20px; //对所有子组件生效.
/deep/ .class3{ } //没有必要写多层deep 父类有deep后子类自动也会深度选择 并且这么写在firfox里会失效
}
}
css关于/deep/的解释和用法
/deep/的意思大概为深入的,深远的。无意中看到css中有关于这种写法,开始没太注意 ,以为是组件css的写法,后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值,这样父组件的样式就不会影响到子组件了,然后你要想修改子组件的样式,一般是提取一个公共文件,在公共文件里面修改样式,但是这样也存在着一个问题,比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式。
例如我在一个商城的项目使用了mint-ui的radio组件,此时mint-ui已经有默认的样式了,我可以通过提取公共文件的方式来修改,以达到自己想要的,但是同时其他地方也会受到影响
与此同时我只想要修改这个地方的样式,在其他页面用到mint-ui的时候不变,我就可以用/deep/了
.mint-radiolist /deep/ .mint-cell { height: 1.312rem; line-height: 1.312rem; min-height: 1.312rem; background: #fff; border-bottom: solid 0.032rem #F2F2F2;
}
.mint-radiolist /deep/ .mint-cell-title {margin-top: 0.3rem;
}
.mint-radiolist /deep/ .mint-radiolist-label { font-size: 0.406rem; color: #333333;
}
.mint-radiolist /deep/ .mint-radio-label { display: inline-block; margin-top: 0.1rem;
}
声明一下哈 ,如果我在公共文件里面修改 .mint-cell 的样式的话就会影响到其他地方,不过像现在这样 就不会影响到其他地方了。
.mint-radiolist[data-v-f60eab44] .mint-radiolist-label
[data-v-f60eab44]表示了我子组件使用了scoped哈
当然在一些浏览器上可能会出现兼容性问题
.mint-radiolist >>> .mint-cell {
height: 1.312rem;line-height: 1.312rem;min-height: 1.312rem;background: #fff;border-bottom: solid 0.032rem #F2F2F2;
}
css关于/deep/和>>>和::v-deep的解释和用法相关推荐
- 多GPU运行Deep Learning 和 并行Deep Learning(待续)
本文论述了 Deep learning运行所需的硬件配置,多GPU运行Deep Learning,设置Deep Learning的数据并行和 模型并行.详情请参考下文 http://timdettme ...
- iOS Deep Linkin 和 Deferred Deep Linking
1. 什么是deep linkin 和 deferred Deep Linking a. deep linkin:在移动开发领域,deep linking 则是指 mobile app 在 handl ...
- [css] 判断如下边框的颜色,并解释为什么[代码]?
[css] 判断如下边框的颜色,并解释为什么[代码]? <p style="color: red;border: 1px solid;">给p设置border,但不给它 ...
- Vue CSS 穿透 scoped (>>> || /deep/ )
Vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成组件之间的样式污染.此时只能通过 >>>,穿透 scoped. 有些 Sass 之类 ...
- css关于/deep/的解释和用法
/deep/的意思大概为深入的,深远的.无意中看到css中有关于这种写法,开始没太注意 ,以为是组件css的写法,后来才发现不是.我们都知道Scoped CSS规范是Web组件产生不污染其他组件,也不 ...
- deep work_如何使用Deep Work成为更好的程序员
deep work by Victor Cassone 由Victor Cassone 如何使用Deep Work成为更好的程序员 (How to use Deep Work to become a ...
- css和js带参数v或version
[转自:https://www.cnblogs.com/pizitai/p/6650450.html] <span style="font-size:14px;">cs ...
- deep nostalgia怎么用?Deep nostalgia操作方法步骤(图文教程)
Deep Nostalgia这款软件可以让静态图像中的人物图像动起来,如果你想知道如何让静态图像中的人物图像动起来,就随着大兵一起来看看Deep Nostalgia图文使用教程吧! DEEP NOST ...
- v$sysstat表解释
按照OracleDocument中的描述,v$sysstat存储自数据库实例运行那刻起就开始累计全实例(instance-wide)的资源使用情况. 类似于v$sesstat,该视图存储下列的统计信息 ...
最新文章
- Web前沿—HTML5 Form Data 对象的使用
- python控制台输出颜色
- Antd组件中单选框、复选框自定义样式的优雅实现
- 企业环境中UM的规划设计和配置
- docker安装ubuntu镜像
- 2015 Spark 将走向哪里?
- AUTOSAR从入门到精通100讲(三十)-makefile原理及实战案例
- 文章发表5天就被举报学术不端,该知名大学迅速处理:停职半年!
- 省选+NOI 第三部分 树上问题
- 脉冲列输入型脉冲比较数字伺服系统的原理图
- Jsp 【项目路径】
- ug中模型不见了怎么办_UG双击prt文件却打不开模型是怎么回事?来看看解决方案吧...
- Android 语言码_国家码
- matlab怎么栅格化地图,用栅格化的思维进行地图散点数据绘制
- 《软技能—代码之外的生存指南》读书笔记之二:自我营销
- 京东百万年薪大佬用JAVA绘制“五子棋棋盘”(附代码)
- Spring、SpringMVC、SpringBoot及其插件学习笔记集合(持续更新中....)
- 清华北大教授联袂推荐的好书:《区块链:金融应用实践》
- Wr720n改装OpenWrt打印服务器实现网络无线打印
- 【读论文-笔记】——1.沐神读Alexnet