/deep/使用方式方式；/deep/无效； ::v-deep和＞＞＞使用；

vue-loader官方文档的 /deep/ >>> ::v-deep 使用方法

场景：一般我们使用vue和element-ui，在修改第三方组件库的样式时候，会修改到页面不存在的html的标签样式，此时就需要使用深度作用选择器。

注意：

1.脚手架vue-cli搭建的 less默认是不支持 >>> ，但是可用 /deep/ 和 ::v-deep；scss支持 >>>
2.使用/deep/的父标签后，子标签直接嵌套写样式!important就可以生效了。千万不能子标签也写/deep/，也就是说不能有两层/deep/。两层会无效。

标题下文以element-ui的表格el-table为例修改样式

正常书写样式的结果：

1.只有.el-table的生效，因为我们代码html有el-table。
2.但是 td 和 .cell 设置就无效了。因为这些标签是在深层我们拿不到。所以设置无效。

使用 /deep/ 书写样式的结果：

3.方式1和方式2任意一个都可以。
4.如果不生效记得在样式后面加上 !important
5.千万注意：不能有两层/deep/嵌套（见下面第三张图）

下图是无效的书写方式：

总的来说就是：我们会在拿不到的标签设置样式时候，在前面使用 /deep/ 以及 !important配合使用。 /deep/ 不生效就换成 ::v-deep 或 >>>

/deep/使用方式方式；/deep/无效； ::v-deep和＞＞＞使用；相关推荐

删除windows文件右击打开方式中的无效程序选项
删除windows文件右击打开方式中的无效程序选项[以.htm和.html文件为例]首先你需要记住要删除的无效程序的名字,以我自己为例,以前装过世界之窗浏览器,流氓软件hao123浏览器,虽然卸载了但 ...
java操作Excel有两种方式方式1：jxl操作Excel jxl的API
java操作Excel有两种方式方式1:jxl操作Excel 方式2:poi操作Excel 下面介绍jxl API: 使用Windows操作系统的朋友对Excel(电子表格)一定不会陌生,但是要使用 ...
深度学习经典论文deep learning！入门必读！：deep learning yann lecun 深度学习
深度学习 YannLeCun, Yoshua Bengio & Geoffrey Hinton 深度学习能够让多层处理层组成的计算模型学习多级抽象的数据的表达.这些方法极大地提高了语音识别,视 ...
【Deep Learning 五】课程二(mproving Deep Neural Networks)，第一周（Setting up your Machine Learning Applicat）答案
吴恩达深度学习课程课后习题(2课1周) 数据集规模相对小的,可以采用传统三七或二二六分法,但在大量数据的时候,只需要1%的验证和测试就足够了.答案C 有时候我们会遇到训练集和验证/测试集来自不同地方的 ...
Spring获取上下文的四种方式方式
一.使用ApplicationContextInitializer,让SpringApplication启动时进行回调,然后获取ApplicationContext 1.创建一个SpringConte ...
php重写aja返回数据方式方式
//控制器应用 exit_json( init_err(1, '操作失败',['234','234234']) );//写下application/common 里面的公共方法 /*** Desc:初 ...
CodeForces - 1486F Pairs of Paths(树上计数+容斥)
题目链接:点击查看题目大意:给出一棵 nnn 个点的树,再给出 mmm 条路径,现在问有多少个路径对 (x,y)(x,y)(x,y),满足第 xxx 条路径和第 yyy 条路径有且仅有一个交点题目 ...
Deep Learning（深度学习）学习笔记整理系列
一.概述 Artificial Intelligence,也就是人工智能,就像长生不老和星际漫游一样,是人类最美好的梦想之一.虽然计算机技术已经取得了长足的进步,但是到目前为止,还没有一台电脑能产生& ...
修改elementUI组件样式无效的多种解决方式
前言:vue+elementUI项目开发中,经常遇到修改elementUI组件样式无效的问题, 原因:在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加s ...

/deep/使用方式方式；/deep/无效； ::v-deep和＞＞＞使用；

标题下文以element-ui的表格el-table为例修改样式

总的来说就是：我们会在拿不到的标签设置样式时候，在前面使用 /deep/ 以及 !important配合使用。 /deep/ 不生效就换成 ::v-deep 或 >>>

/deep/使用方式方式；/deep/无效； ::v-deep和＞＞＞使用；相关推荐

最新文章

热门文章