深度（穿透）选择器 ＞＞＞ /deep/ ::v-deep
深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）。本文对深度选择器做一个总结记录。
1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式
<style lang="css" scoped>
.el-button >>> span{
color: '#f00'
}
</style>
2、当项目中使用的 css 扩展语言是 less， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
<style lang="less" scoped>
/deep/.el-button{
span{
color: '#f00'
}
}
.el-button::v-deep{
span{
color: '#f00'
}
}
</style>
3、当项目中使用的 css 扩展语言是 node-sass， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
<style lang="scss" scoped>
.el-button::v-deep{
span{
color: '#f00'
}
}
/deep/.el-button{
span{
color: '#f00'
}
}
</style>
4、当项目中使用的 css 扩展语言是 dart-sass， 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式，dart-sass不支持 /deep/ 和 >>> 的写法
<style lang="scss" scoped>
.el-button::v-deep{
span{
color: '#f00'
}
}
</style>
注意：
① 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/
② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用
原文链接：https://blog.csdn.net/qq_37600506/article/details/122703393
深度（穿透）选择器 ＞＞＞ /deep/ ::v-deep相关推荐
- CSS深度(穿透)选择器
前言: 今天在项目开发过程中,使用 Element UI 的走马灯(轮播图)组件,想去改左右箭头样式和下面的小圆点.使用发现改不了发现直接修改不了,需去掉 scoped 属性或者使用深度选择器才能修改 ...
- 日期时间选择器选择器更改样式deep穿透无效
DateTimePicker 日期时间选择器 时间选择器更改样式deep穿透无效,在选择器中加入到teleported属性设置为false
- 干货丨科普丨大牛的《深度学习》笔记，Deep Learning速成教程
深度学习,即Deep Learning,是一种学习算法(Learning algorithm),亦是人工智能领域的一个重要分支.从快速发展到实际应用,短短几年时间里,深度学习颠覆了语音识别.图像分类. ...
- CTR深度学习模型之 DSIN(Deep Session Interest Network) 论文解读
之前的文章讲解了DIEN模型:CTR深度学习模型之 DIEN(Deep Interest Evolution Network) 的理解与示例,而这篇文章要讲的是DSIN模型,它与DIEN一样都从用户历 ...
- 深度学习还没入门？看看深度学习三巨头的Deep Learning综述(4)
深度学习还没入门?看看深度学习三巨头的Deep Learning综述(1) 深度学习还没入门?看看深度学习三巨头的Deep Learning综述(2) 深度学习还没入门?看看深度学习三巨头的Deep ...
- 【深度学习】大牛的《深度学习》笔记，Deep Learning速成教程
深度学习,即Deep Learning,是一种学习算法(Learning algorithm),亦是人工智能领域的一个重要分支.从快速发展到实际应用,短短几年时间里,深度学习颠覆了语音识别.图像分类. ...
- 基于深度残差学习的图像识别 Deep Residual Learning for Image Recognition
[译]基于深度残差学习的图像识别 Deep Residual Learning for Image Recognition Kaiming He Xiangyu Zhang Shaoqing Ren ...
- 大牛的《深度学习》笔记，Deep Learning速成教程
本文由Zouxy责编,全面介绍了深度学习的发展历史及其在各个领域的应用,并解释了深度学习的基本思想,深度与浅度学习的区别和深度学习与神经网络之间的关系. 深度学习,即Deep Learning,是一种 ...
- 【推荐算法】深度学习推荐算法综述 Deep Learning based Recommender System: A Survey and New Perspectives
一.MLP based Recommender System 1. Deep Crossing模型 Deep Crossing模型完整的解决了从特征工程.稀疏向量稠密化.多层神经网络进行优化目标拟合等 ...
- 深度学习编译器综述The Deep Learning Compiler
深度学习编译器综述The Deep Learning Compiler The Deep Learning Compiler: A Comprehensive Survey 参考文献: https:/ ...
最新文章
- 组合特征（一）tfidf(word+article)
- wpsppt怎样让图片模糊_图片优化的14个技巧！
- PHP开发如何实现多线程?
- 如何使用Java获取当前日期/时间
- python爬虫教程i-Python 爬虫速成教程，还有35个实战项目送给你！
- 【Android 安全】DEX 加密 ( Application 替换 | Android 应用启动原理 )
- 【SSM框架系列】Spring IoC（控制反转） DI（依赖注入）注解开发
- 利用opencv改变视频长宽
- python中时间模块
- ThinkPHP（3.2）搭建简单留言板项目
- [BZOJ4987]Tree
- JS正则表达式的分组匹配
- 菜鸟学Linux 第079篇笔记 mysql备份lvm
- 微信支付二维码生成工具类
- 杭州电子科技大学acm--2018
- 信号与系统作业之我的朋友把我的大作业分享了好朋友
- itext7读取pdf 中文_itext7史上最全实战总结
- Linux驱动开发（外传）---驱动开发调试方法
- CDA学习笔记--EXCEL篇
- drf实现图片验证码功能