VUE中stylescoped修改原有样式
作⽤域CSS
当<style>标记具有该scoped属性时，其CSS将仅应⽤于当前组件的元素。这类似于Shadow DOM中的样式封装。它有⼀些警告，但不需要任何polyfill。通过使⽤PostCSS转换以下内容来实现：
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
进⼊以下：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
混合本地和全局样式
您可以在同⼀组件中包含范围和⾮范围样式：
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
⼦组件根元素
使⽤时scoped，⽗组件的样式不会泄漏到⼦组件中。但是，⼦组件的根节点将受⽗级作⽤域CSS和⼦级作⽤域CSS的影响。这是设计的，以便⽗级可以设置⼦根元素的样式以进⾏布局。
深度选择器
css 属性选择器
如果您希望scoped样式中的选择器“深⼊”，即影响⼦组件，则可以使⽤>>>组合⼦：
<style scoped>
.a >>> .b { /* ... */ }
</style>
以上将编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }
某些预处理器（如Sass）可能⽆法>>>正确解析。在这些情况下，您可以使⽤组合/deep/或::v-deep组合 - 两者都是别名，>>>并且⼯作完全相同。
动态⽣成的内容
创建的DOM内容v-html不受范围样式的影响，但您仍然可以使⽤深度选择器设置它们的样式。
范围样式不会消除类的需要。由于浏览器呈现各种CSS选择器的⽅式，p { color: red }在作⽤域时（即与属性选择器结合时）会慢很多倍。如果您使⽤类或ID，例如in .example { color: red }，那么您⼏乎可以消除性能损失。，您可以⾃⼰测试差异。
在递归组件中注意后代选择器！对于带有选择器的CSS规则.a .b，如果匹配的元素.a包含递归⼦组件，则.b该⼦组件中的所有组件都将与规则匹配。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。