CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
一、什么是scoped 在vue文件中的style标签上,有一个特殊的属性:scoped。 当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 二、scoped的原理 为组件实例生成一个唯一标识,给组件中的每个标签对应的dom元素添加一个标签属性,data-v-xxxx ...
css 样式穿透(深度样式选择器)的使用
最近在使用uniapp,做一款跨平台的APP,用到了UI框架和一些uniapp的组件,很多时候组件的样式不能满足需求,但是修改的时候又无法修改;原因就是scoped的问题,组件中习惯使用一个带有scoped属性的Style标签,当然也是为了防止组件之间的样式冲突问题,scoped属性效果,就是在编译打包后在当前组件标签中统一添加一个随机属性(v-data-356hjxxxxxxx),下图所示: ....

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。
CSS更多样式相关
开发与运维
集结各类场景实战经验,助你开发运维畅行无忧
+关注