遇到的问题如下：
elementUI里使用复合input输入框时，默认append的样式不能满足后面经纬度符号的显示，并且背景颜色也有问题，对此进行样式修改，如下
但修改后的效果如第一张图所示没有任何效果，在Chrome里也并未出现上述样式，明显是没有选中。
于是想到深度选择器，依稀记得原来好像使用过/deep/深度选择器，不过vue编译报错
使用 >>> 选择器也不行，编译能通过，但不生效
于是在 vue-loader的官方文档 找到了解决办法，关于为什么/deep/选择器没有生效在此没有深入研究，欢迎大佬指正。
使用 ::v-deep 替换深度选择器后，虽然vsc的代码高亮没有识别出来，但是实际样式生效了
以上内容写自题主刚学习前端的时候，当时理解并不全面，以下是最近的补充。
需要深度选择器原因 是此样式是放在带有scoped属性的style标签内的，这种类型样式，在实际编译时会带上一个唯一的data-v值，vue在渲染组件的模板时也会给该组件的元素附上一个唯一的data-v值（可以在上图的开发者工具界面中看到），以保证其只在组件内生效。
而这个vue组件中引入的 其他组件 内的元素，并不会带上这样的data-v，所以CSS选择器才选择不到指定的元素。
工作后在公司写代码时也遇到了类似的问题，因为仓库webpack配置原因（用了魔改的vue-loader），无法支持深度选择器（即编译后始终后始终不生效）。
看到这里的朋友可以尝试另一种更友好的方式：在要更改样式的组件的父节点，添加一个特定的id或class（单个项目唯一命名），并在不带有scoped属性的style标签，用css父子选择器添加样式。如下：
<template>
<!-- home-page即为特定的class名，保证其不会污染到其他元素即可 -->
<div class="parent-node home-page">
<el-input class="input-with-select">
<el-select slot="append"></el-select>
</el-input>
</div>
</template>
<style scoped>
/* 一些组件内样式 */
</style>
<style lang="scss">
.home-page {
.input-with-select {
.el-input-groud__append {
// 要设置的样式
}
}
}
</style>
