>>>或/deep/的作用

使用场景：

已知vue组件编译后会为template中的每个元素加入[data-v-xxxx]来确保style scoped，即样式文件仅作用于本组件，而不会去污染全局。那么当我们在vue组件中引用了第三方组件库，如elementUI、antDesign，则编译后只会在相关组件的最外层包含[data-v-xxxx]属性，嵌套的内层元素则无该属性。此时若你想改变内层元素的样式，就会出现无法生效的问题。
如我在template中使用了标签，经编译后效果如图所示：

image.png

此时我想让placeholder的文字与input输入框向右偏移，离左边图标稍远一点，打开开发者工具，可以看到此处的源代码如图：

image.png

若我们增大右边padding-left的值，会达到预期的效果。那我们直接在源码里加入该样式，是否有用呢：

.ant-input:not(:first-child) {
  padding-left: 30px;
}

令人遗憾的是，编译后的页面并不能达到预期的效果，在开发者工具中找原因，会发现该样式被vue自动添加了后缀：

image.png

而相应的标签是没有后缀的，所以导致样式无法应用于相应的标签。
知道了原因，就可以寻找相应对策。我们直到vue给样式添加后缀是因为在style中添加了scoped属性，倘若我们去掉scoped属性，会发现能实现预期效果，但此时样式便不再独立作用于该组件，有可能会污染其他组件，因小失大，得不偿失。
此时就是本文的主角出场的时候了。只需要在相关样式语句前加上>>>(css)或/deep/(less)，就能实现样式穿透。

// css
>>> .ant-input:not(:first-child) {
  padding-left: 50px;
}

或者

// less
/deep/ .ant-input:not(:first-child) {
  padding-left: 50px;
}

此时vue不会在该样式后加后缀，就可以达到预期要求，同时保证样式仅作用于该组件。

image.png

image.png