vue | 样式隔离scoped的原理 样式穿透deep的原理

vue中的样式穿透

scoped 样式隔离

一个style标签拥有scoped属性时，css样式就只能作用于当前的组件，这样就可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了组件的私有化，样式的模块化。

原理
scope的本质是分别给 HTML 标签和 CSS 选择器添加 data-v-xxx,来达到样式隔离的效果。

1. 选中的标签中添加属性data-v-hash值
2. 样式选择器在后面追加data-v-hash的属性选择器
   

样式穿透问题
使用 scoped 后，父组件是没有办法修改子组件中的样式(除了子组件根节点)

• 父组件的样式将不会渗透到子组件中
• 父组件可以修改子组件根节点样式

父组件可以修改子组件根节点样式

如果在父组件中设置样式div span，那么父组件该样式的优先级高一点，所以span是黑色

//父组件css
span{
   
   
  color: black;
}

//子组件html
<template>
    <span >
        子组件