vue中深度选择器deep的使用

一、使用场景

当<style>标签有scoped属性时，它的css样式只作用域当前组件中的元素，不会渗透到当前组件中元素的子组件中。实现方式为在打包时会为组件样式生成一共独一无二的hash值，通过这个hash值可以区分不同组件的样式，如图：

在根组件中使用了scoped，在最终样式里，为当前组件和其子组件的第一层添加了相同的hash值7ba5bd90(00e824d4是outerBox的hash值），子组件的第二层是没有添加该hash值，所以更改innerBox的背景颜色也没有生效，innerBox的样式匹配为：

二、深度选择器使用

深度选择器的使用格式为

<style scoped>
  外层 >>> 引用组件类名{		// 在css中使用>>>, vue-loader还提供了/deep/ 和::v-deep作用相同
      样式
	}
<style>

在根组件中使用深度选择器，如下：

通过hash值匹配的样式进行了覆盖，最终背景颜色得以修改。在引入第三方样式库时，对公共样式的修改与这个例子同理。