vue.js组件化开发模式中，如何让样式只能应用于本组件及其子组件。

Question

使用scoped的话样式就只能影响到当前组件而不能影响其子组件了，而有时因为设计问题，不同子组件间存在大量的样式共用，想着请教大神是否能让样式只能应用于本组件及其子组件。

Answer 1

不使用scoped并自己把控制握好css命名空间可以对每个组件都用特定唯一的class命名，且该组件的css都在该命名的范围内。例如 header是index的子组件&nbsp;&nbsp;&nbsp;&nbsp;.header-comp{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h2{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.title{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.index-view{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.container{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}最终渲染&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="index-view"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="header-comp"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;.index-view{}&nbsp;&nbsp;&nbsp;&nbsp;.index-view&nbsp;xxx{}&nbsp;&nbsp;&nbsp;&nbsp;.header-comp{}&nbsp;&nbsp;&nbsp;&nbsp;.hader-comp&nbsp;.xxxx{}