Open jtwang7 opened 2 years ago
参考文章：Scoped CSS
✅ Q: 为什么设置了 Scoped 之后，父组件样式仍可能影响到子组件样式
🔆 A: 子组件的根元素 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
Vue 为了方便父组件从布局的角度出发，调整其子组件根元素的样式，故意暴露了子组件根节点样式，使其关联了父组件和子组件。子组件内部的样式属于子组件作用域，不会受父组件影响。
✅ Q: 父组件添加scoped之后，无法在父组件中修改子组件样式
🔆 A: 在vue的开发中，我们需要引用子组件，包括ui组件（element、iview）。但是在父组件中添加scoped之后，在父组件中书写子组件的样式是无效果的。去掉scoped之后，样式可以覆盖。但这样会污染全局样式，为了解决这个问题，vue-loader新增书写方式。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符，有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
>>>
/deep/
::v-deep
Vue Scoped CSS
参考文章：Scoped CSS
✅ Q: 为什么设置了 Scoped 之后，父组件样式仍可能影响到子组件样式
🔆 A: 子组件的根元素 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
✅ Q: 父组件添加scoped之后，无法在父组件中修改子组件样式
🔆 A: 在vue的开发中，我们需要引用子组件，包括ui组件（element、iview）。但是在父组件中添加scoped之后，在父组件中书写子组件的样式是无效果的。去掉scoped之后，样式可以覆盖。但这样会污染全局样式，为了解决这个问题，vue-loader新增书写方式。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用
>>>操作符，有些像 Sass 之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/或::v-deep操作符取而代之——两者都是>>>的别名，同样可以正常工作。