摘自:https://blog.csdn.net/zhouzuoluo/article/details/95593143

<style scoped >中使用深度选择器影响子组件

在<style scoped >样式中使用深度选择器影响子组件,可以使用 >>> 操作符,使用如下

.MiddleContainerPage >>>.el-button--primary{
color:red;
}
在 SCSS / Sass 之类的预处理器无法正确解析 >>>, 所以 /deep/ 操作符取而代之,代码如下

.MiddleContainerPage /deep/.el-button--primary{
color:red;
}
注意事项:

CSS 作用域不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式,当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example { color: red },性能影响就会消除。你可以在这块试验田中测试它们的不同。
在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说,如果匹配 .a 的元素包含一个递归子组件,则所有的子组件中的 .b 都将被这个规则匹配。
————————————————
版权声明:本文为CSDN博主「广积粮缓称王」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zhouzuoluo/article/details/95593143

<style scoped >中使用深度选择器影响子组件的更多相关文章

  1. 在vue组件中style scoped中遇到的坑

    在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...

  2. vue组件中的style scoped中遇到的问题

    在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...

  3. IE6中使用通用选择器模拟子选择器效果

    IE6及更低版本不支持高级选择器:IE7有个bug,对于子选择器和相邻同胞选择器,如果父元素和子元素有HTML注释,会出问题. 下面我们使用通用选择器来模拟子选择器的效果. 原理:首先在所有后代上应用 ...

  4. 如何在组件中监听vuex数据变化(当vuex中state变化时,子组件需要进行更新,怎么做?)

    todo https://blog.csdn.net/qq_37899792/article/details/97640434

  5. VUE中 style scoped 修改原有样式

    作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...

  6. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  7. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  8. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作

    需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...

随机推荐

  1. SCHema学习

    <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http:/ ...

  2. memset函数总结

    之前有一个程序栽在了memset函数上面,对memset函数一直耿耿于怀,于是想总结一下这个常用但是总出错的函数. memset在string.h文件中是这么定义的: void*代表这个函数的返回值可 ...

  3. 第1节 IMPALA:7、impala的安装以及配置过程

    6.制作本地yum源 镜像源是centos当中下载相关软件的地址,我们可以通过制作我们自己的镜像源指定我们去哪里下载impala的rpm包,这里我们使用httpd这个软件来作为服务端,启动httpd的 ...

  4. dwr??

    官方网站:http://directwebremoting.org/dwr/index.html http://m.blog.csdn.net/u013628152/article/details/5 ...

  5. leetcode349 350 Intersection of Two Arrays & II

    """ Intersection of Two Arrays Given two arrays, write a function to compute their in ...

  6. apache端口修改为80

    apache端口莫名改变为443,访问网址失败,修改Apache端口: 1.打开目录(实际而定): C:\xampp\apache\conf 编辑httpd.conf 2.ctrl + f  搜索li ...

  7. Yarn的资源调优

    一.概述 每个job提交到yarn上执行时,都会分配Container容器去运行,而这个容器需要资源才能运行,这个资源就是Cpu和内存. 1.CPU资源调度 目前的CPU被Yarn划分为虚拟CPU,这 ...

  8. 多个Spring Boot项目部署在一个Tomcat容器无法启动

    转自https://www.cnblogs.com/tomxin7/p/9434085.html 业务介绍 最近用Spring Boot开发了一个翻译的小项目,但是服务器上还跑着其他项目,包括一个同样 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-plus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. DevOps - 工程师职责

    章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...