一次CSS不生效的处理-深度选择器一、背景在一个基于vue2的工程中，引用了一个UI框架，当使用到其中的文本输入框组件

一、背景

在一个基于vue2的工程中，引用了一个UI框架，当使用到其中的文本输入框组件的时候，需要对输入的内容进行右对齐，于是我打开Chrome浏览器，先用调试工具对样式进行了处理，对输入框增加了如下样式

input.xxx-ui {
  text-align: right;
}

预览的效果符合预期，直接在vue页面的中添加如上代码，

<style scoped>
  input.xxx-ui {
    text-align: right;
  }
</style>

启动工程测试，发现样式不生效。我的经验告诉我说这不可能，哪里出错了，琢磨了半天，还是去请教了前端的大佬，一眼就帮我搞定了，说：“样式前面增加一个深度选择器，就是三个大于符号”。

<style scoped>
  >>>input.xxx-ui {
    text-align: right;
  }
</style>

就这，真是活到老要学到老。

二、分析以及处理

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用深度选择器。
而我项目中刚好是在vue页面中使用到了xxUI的组件，我想修改的就是组件中的样式，而不是这个vue页面中的样式，因此触发了不生效的场景。综上，这个场景触发的要素有两个：

vue页面中的style带有了scoped属性
想要修改的样式是一个组件因此解决方案就是增加一个深度选择器的符号 >>>。