样式中的深度选择器

在 Vue 的开发中，我们经常会用到外部组件库，例如 element，而在VUE页面开发中，我们常常会使用 scoped 来防止样式影响全局，但是当我们需要对组件进行样式调整时，会发现我们直接修改是修改不了的，这个时候我们便可以使用深度选择器（样式穿透）来进行修改。

深度选择器有三种：

1、使用 css 原生样式 ，我们可以使用 >>> 深度选择器来修改组件的样式；

<style lang="css" scoped>
    .el-button >>> span{
        color: red;
    }
    >>> input_inner{
        color:red;
    }
</style>

2、使用 less 时， 我们可以使用 /deep/ 深度选择器来修改组件的样式；

<style lang="less" scoped>
 /deep/.input_inner {   
          color: '#f00'
       }
</style>

3、使用 sass（scss）， 我们可以使用 /deep/ 或者 ::v-deep 深度选择器组件的样式；

但是在 vue3 中使用 /deep/ 控制台会报错，把 /deep/ 换成 ::v-deep就好了；

<style lang="scss" scoped>
   //input获取焦点改变输入框颜色
   ::v-deep .search_input {
     .el-input__inner {
        &:focus {
          border:2px solid #768ad7 !important;
        };
     };
   };
</style>