摘自: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. HiBench成长笔记——(7) 阅读《The HiBench Benchmark Suite: Characterization of the MapReduce-Based Data Analysis》

    <The HiBench Benchmark Suite: Characterization of the MapReduce-Based Data Analysis>内容精选 We th ...

  2. uboot配置和编译过程详解

    根据朱有鹏老师讲解整理 一.uboot主Makefile分析 1.uboot version确定(Makefile的24-29行) include/version_autogenerated.h文件是 ...

  3. linux 常用文件命令记录

    服务开启命令 service  服务  start/stop/stauts 查看ip ifconfig 清屏 clear 显示当前所在位置 pwd 切换目录 cd 查看所有文件(包括隐藏) ls -a ...

  4. 018、Java中除法的是用,解决除法计算精度问题

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  5. pig安装配置及实例

    一.前提 1. hadoop集群环境配置好(本人hadoop版本:hadoop-2.7.3) 2. windows基础环境准备: jdk环境配置.esclipse环境配置 二.搭建pig环境 1.下载 ...

  6. sql server 2012插入排序后的数据到临时表无效

    IF OBJECT_ID('TEMPDB..#list') IS NOT NULLBEGIN DROP TABLE TEMPDB.#list END CREATE TABLE #list(OFC_ID ...

  7. Exceeded memory limit for $group, but didn't allow external sort. Pass allowDiskUse:true to opt in

    原语句: db.carMongoDTO.aggregate({}}}, {}}}) 报错: Exceeded memory limit for $group, but didn't allow ext ...

  8. nginx常用配置解析

    1.常用公共参数(一般放在http下面,虽然很多参数都支持server和location) keepalive_timeout  60;  #单位为s keepalive_request 2;  #设 ...

  9. hibernate保存失败

    报错:org.hibernate.jdbc.BdatchedTooManyRowsAffectedException: Batch update returned unexpected row cou ...

  10. 148-PHP strip_tags函数,剥去字符串中的 HTML 标签(二)

    <?php //定义一段包含PHP代码的字符串 $php=<<<PHP 这里是PHP代码的开始 <?php echo "hello!"; PHP; $ ...