编程知识 cdmana.com

Vue学习——样式冲突(24)

组件之间样式冲突

原因

默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题
根本原因:
①单页面应用程序中,所有组件的DOM结构,都是基于唯一的index.html页面进行呈现的
②每个组件中的样式,都会影响整个index.html页面中的DOM元素

比如:我在left组件里面写了color=red,然后其他组件也生效了
在这里插入图片描述

在这里插入图片描述

因为在<style>里面写了样式之后,我们影响的是整个页面,既然影响了上面的h3,那么下面的h3我们也照样能影响到
在这里插入图片描述

解决

①给每个标签加属性选择器,然后在css里面使用属性选择器进行
但是这样太麻烦了,因为要写太多的属性了

②在style标签内添加scoped属性即可
在这里插入图片描述

在这里插入图片描述

样式穿透

我们现在想在left标题里面直接修改存在于left里面的count.vue,相当于我们需要穿透left进入存在于他内的count

在这里插入图片描述

如果我们只在left.vue里面加了h5的样式
在这里插入图片描述

是没有任何变化的
在这里插入图片描述

因为在count里面的这个h5是没有任何样式的
在这里插入图片描述

/deep/

解决的办法是,在h5前面加上/deep/
在这里插入图片描述

在这里插入图片描述

vue相关组件库

Vant,element-ui
如果需要改动第三方组件库封装好的组件时,就必须使用样式穿透!

版权声明
本文为[Hoorus]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_52480906/article/details/126111967

Scroll to Top