深度（穿透）选择器 ::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 比较通用

就记录到这，祝大家开心~

深度（穿透）选择器 ::v-deep /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,是一种 ...
深度学习编译器综述The Deep Learning Compiler
深度学习编译器综述The Deep Learning Compiler The Deep Learning Compiler: A Comprehensive Survey 参考文献: https:/ ...
深度学习编译与优化Deep Learning Compiler and Optimizer
深度学习编译与优化Deep Learning Compiler and Optimizer

深度（穿透）选择器 ::v-deep /deep/ 及＞＞＞

深度（穿透）选择器 ::v-deep /deep/ 及＞＞＞相关推荐

最新文章

热门文章

深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞

深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞相关推荐

最新文章

热门文章

深度（穿透）选择器 ::v-deep /deep/ 及＞＞＞

深度（穿透）选择器 ::v-deep /deep/ 及＞＞＞相关推荐