码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-28 13:51:18      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:预处理器   试验   tail   scss   元素   无法   浏览器渲染   amp   协议   

摘自: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 >中使用深度选择器影响子组件

标签:预处理器   试验   tail   scss   元素   无法   浏览器渲染   amp   协议   

原文地址:https://www.cnblogs.com/xichji/p/12376563.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!