vue组件中，在style标签中有一个属性，叫做scoped。当此标签拥有scoped属性的时候，该组件下的css样式只适用于本组件，而不会影响全局组件。这其实也相当于样式的模块化了。
其实scoped中最重要的就是PostCSS,PostCSS是一种css的编译的工具。来看一下转译之前的代码：
编译前的代码：
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <span class="textScoped">scoped测试</span> </template> <script> </script> <style scoped> .textScoped{ color: red; } </style> |
编译之后的代码:
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <span data-v-3e5b2a80 class="textScoped">scoped测试</span> </template> <script> </script> <style scoped> .textScoped[data-v-3e5b2a80]{ color: red; } </style> |
编译后，我们发现css中，PostCSS给所有的dom都添加了一个独一无二的动态属性，给css选择器也添加了一个对应的属性选择器，这样就可以让样式只作用于该属性的dom元素（组件内部的dom）。
from:https://www.cnblogs.com/marksir/p/11685350.html