Vue Loader 作用域CSS（scoped）——/deep/ 深入组件选择器
2021-04-15 01:25
标签：本地 生成 csdn 影响 size style 就是 load data- 用过vue组件的前端同学应该都遇到过一个问题，就是在当前页的组件有自定义样式，而用了scoped编译出的样式对组件内部并不起作用，最后要写全局样式才能有效，但是可能会污染到其他组件，其实我们可以用/deep/来解决此问题。 关于scoped请查看：https://www.cnblogs.com/vickylinj/p/9573395.html 您可以在同一组件中包含全局和非全局样式，此方法可能造成污染： 使用时scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这是设计的，以便父级可以设置子根元素的样式以进行布局。 如果您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合子： 以上将编译成： 某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用/deep/组合器 - 它是别名>>>并且工作完全相同。 创建的DOM内容v-html不受范围样式的影响，但您仍然可以使用深度选择器设置它们的样式。 范围样式不会消除类的需要。由于浏览器呈现各种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.html1.混合本地和全局样式
style>
/* global styles */
style>
style scoped>
/* local styles */
style>
2.深度选择器——>>>(/deep)
2.1子组件根元素
2.2>>>(/deep)
style scoped>
.a /deep/ .b{ /* 第一种写法 */
}
.a >>> .b { /* 第二种写法 */
}
style>
// less 写法
style lang=‘less‘ scoped>
.a {
/deep/ .b{ /* less 写法 */
}
}
style>
.a[data-v-f3f3eg9] .b { /* ... */ }
2.3动态生成的内容
2.4注意
文章标题：Vue Loader 作用域CSS（scoped）——/deep/ 深入组件选择器
文章链接：http://soscw.com/index.php/essay/75872.html