需求描述

重写element-ui 按钮<button>内部嵌套的<span>的样式

无奈用了css内部选择器也无法实现

请教别人以后，发现有以下三种做法

解决办法

1. 在App.Vue中使用css内部选择器

不推荐 缺点 代码不符合规范，如果此类需求过多，App.Vue会很乱。 并且 如果使用特性选择器的时候 会很慢；

2. 删除掉<style scoped> 中的scoped 这样就会生效

不推荐 缺点 同上； 如果没有限制好特定作用域的话 容易产生样式覆盖

3. 使用Vue 提供的深度选择器

推荐 不会产生上述情况 只对当前作用域生效

	<style scoped>
    .parent >>> .child { /* ... */ }
	</style>

将会编译成:

	.parent[data-v-f3f3eg9] .child { 
		/* ... */ 
	}

而对于less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>操作符，例如：

	.parent /deep/ .child { 
		/* ... */ 
	}

scoped的原理

细心的小伙伴会发现上述代码编译后 会增加[data-v-******]的东东，其实Vue就是根据这个确定作用域的，
这也就是scoped的原理