vue /deep/深度选择器

作用

这里我们先贴一个官网的说法： vue-loader.vuejs.org/guide/scope… 含义大概是：能够穿透并影响子组件的样式。

使用场景

我们知道在vue组件中样式中添加 scoped，那么这个样式就会被设定为只影响这个vue组件内的内容 假定某个vue组件又引用了element-ui 亦或者其他UI组件，此时 UI不满意element-ui的样式，想要在这个页面微调下element-ui的页面。但不能影响全局element-ui组件样式。那么我们就需要使用/deep/ 来穿透scoped。

<style scoped lang="less">
  & /deep/ .el-input--small .el-input__inner{
    height: 20px !important;
    line-height: 20px !important;
    font-size: 12px !important;
  }
<style>
复制代码

注意事项

1: 由于deep是vue-loader中的标准。并不是现行的 css标准。无论是 vue-cli2 中的static文件夹以及vue-cli3中的public文件夹都是仅仅执行了copy_webpack_plugin 所以两者中的css不能使用/deep/选择器。

2：deep不可以嵌套使用。嵌套使用的话，内层的deep不会被正确打包

& /deep/ .isModify{
  & /deep/  .el-input__inner{
        border-color: #f6dfd4;
        background-color: #fff4ef;
        color: #ff6000;;
    }
}

作者：嚣张的胖头鱼
链接：https://juejin.im/post/5e990fc0518825085d6d0299
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。