码迷,mamicode.com
首页 > Web开发 > 详细

Vue Loader 作用域CSS(scoped)——/deep/ 深入组件选择器

时间:2020-02-26 19:10:11      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:本地   生成   csdn   影响   size   style   就是   load   data-   

用过vue组件的前端同学应该都遇到过一个问题,就是在当前页的组件有自定义样式,而用了scoped编译出的样式对组件内部并不起作用,最后要写全局样式才能有效,但是可能会污染到其他组件,其实我们可以用/deep/来解决此问题。

关于scoped请查看:https://www.cnblogs.com/vickylinj/p/9573395.html

1.混合本地和全局样式

您可以在同一组件中包含全局和非全局样式,此方法可能造成污染:

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

 

2.深度选择器——>>>(/deep)

2.1子组件根元素

使用时scoped,父组件的样式不会泄漏到子组件中。但是,子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这是设计的,以便父级可以设置子根元素的样式以进行布局。

2.2>>>(/deep)

如果您希望scoped样式中的选择器“深入”,即影响子组件,则可以使用>>>组合子:

<style scoped>
.a /deep/ .b{ /* 第一种写法 */
}
.a >>> .b { /* 第二种写法 */
}
</style>
// less 写法
<style lang=‘less‘ scoped>
.a {
    /deep/ .b{ /* less 写法 */
    }
}
</style>

以上将编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

某些预处理器(如Sass)可能无法>>>正确解析。在这些情况下,您可以使用/deep/组合器 - 它是别名>>>并且工作完全相同。

2.3动态生成的内容

创建的DOM内容v-html不受范围样式的影响,但您仍然可以使用深度选择器设置它们的样式。

2.4注意

范围样式不会消除类的需要。由于浏览器呈现各种CSS选择器的方式,p { color: red }在作用域时(即与属性选择器结合时)会慢很多倍。如果您使用类或ID,例如in .example { color: red },那么您几乎可以消除性能损失。这是一个游乐场,您可以自己测试差异。

在递归组件中注意后代选择器!对于带有选择器的CSS规则.a .b,如果匹配的元素.a包含递归子组件,则.b该子组件中的所有组件都将与规则匹配。

转自:https://blog.csdn.net/a0405221/article/details/87373293

Vue Loader 作用域CSS(scoped)——/deep/ 深入组件选择器

标签:本地   生成   csdn   影响   size   style   就是   load   data-   

原文地址:https://www.cnblogs.com/vickylinj/p/12368206.html

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