scoped css
当标签有scoped属性时,它的css样式只作用于当前组件,父组件的样式无法参透到子组件 不过子组件的根节点会同时受 父组件的scoped css 和 子组件的 scoped css 影响
举例:
子组件设置scoped 并定义 scoped 和 inner 两个class:
父组件scoped中 修改子组件的样式:
结果:
根节点的 背景色被修改 inner中的背景修改失败 如果想修改 inner 中的样式需要 深度作用选择器
深度作用选择器
如果你希望scoped样式中的一个选择器能够被更深层次修改 你可以使用 >>>
操作符
将上面父组件样式内容修改为 如下所示:
结果:
深度选择器完成了 对scoped 子组件的修改
但这里有一个细节 style 标签中没有使用 lang="less"
原因是 这些预处理器无法正确解析 >>> 操作符 上述 代码加上 lang="less" 后结果:
这个时候你可以使用 /deep/
符 代替:
/deep/
使用/deep/操作符 代码修改如下
成功:
本地 与 全局 混用
你可以在一个组件中同时使用 scoped 和 非 scoped 样式:
data-v-[hash]
当组件中有 含scoped 的style标签时 DOM结构上就会出现 data-v-[hash] 属性 这个属性实现了 局部作用域
如果当前组件只含有 全局 style:
DOM 展示为:
当含有 scoped 时 (无论是否存在 与全局混用 )
DOM 展示为: