关于vue中采用scoped时，组件的中css优先级

总结：

• 当我们的style里面写上scoped时，会给class加上命名的哈希值，否则是全局样式覆盖
• 首先我们思考一下vue的生命周期里说的，挂载的时候是从里到外，那么组件里的哈希值的class也是由里到外创建，此时父组件的class会写在子组件后面，所以当两个class在同一个元素上时，父组件的class会覆盖子组件的class
• vue2中template里面只能有一个元素，我们称之为根元素，vue3中可以有多个元素，所以说vue3中组件可以没有根元素；如果有根元素存在的情况下，父组件中子组件的元素上面的样式会带到子组件的根元素上面

来段代码实验一下

<template>
<div>
  我是父组件
  <Children class="test" />
</div>
</template>

<style scoped>
div{
  background: gray;
  padding: 20px;
}
</style>

<template>
<div>
  我是子组件
</div>
</template>

<style scoped>
div{
  background: green;
  padding: 20px;
}
</style>

从中我们看到了当我们使用了scoped后，子组件的根元素会有父组件的命名空间哈希值，并且优先级比子组件的优先级高

当子组件中的最外层有多个元素时：

<template>
<div>
  我是子组件
</div>
<div>sssss</div>
</template>

<style scoped>
div{
  background: green;
  padding: 20px;
}
</style>

通过上面的效果图看到，此时子组件因为没有根元素，所以父元素命名的哈希值不会在子组件的元素上面