# 关于为什么vue父组件使用scoped之后还会影响子组件中的样式

为什么要用scoped？ 

当组件间的类名相同时，会发生css样式污染问题。

如果是父子组件有相同类名，则样式都为父组件中的同类名样式，如果是兄弟组件，看哪个组件最后创建，样式就以哪个为主进行覆盖之前创建的组件的样式。

原因

当父组件中的子元素跟子组件的根元素同为兄弟结点时，在父组件中定义的class（具有相同的类名的元素）会影响到子组件的根元素的样式， vue官方文档。

 

解决办法

原理是避免父组件中的class与子组件的根元素的class重名，或者更改当前的层级，避免跟同名的class在同一及。
相关文章------scoped的作用。