CSS样式穿透的几种方法

通常在引入第三方 UI 组件库（如 element-ui或者easyUI等等），需要自定义组件样式时，但由于样式使用了 scoped 属性（为避免组件之间的样式相互影响），导致无法直接覆盖原组件的样式，这时就需要用到样式穿透。

CSS使用样式穿透的方法有以下几种：

1、使用

>>>

符号：

.container >>> .el-input__inner {
    width: 160px;
}

该方法适用的样式语法：css、stylus

2、使用

/deep/

：

.container /deep/ .el-input__inner {
    width: 160px;
}

该方法适用的样式语法：sass、scss、less

3、使用

::v-deep

：

::v-deep .el-input__inner {
    width: 160px;
}

该方法对所有样式语法通用，即适用于 css、stylus、sass、scss 和 less

其中

/deep/

和

::v-deep

属于深度选择器。