vue css ＞＞＞， /deep/ 深度选择器

最新推荐文章于 2025-04-02 14:27:47 发布

Eason_qyl

最新推荐文章于 2025-04-02 14:27:47 发布

阅读量1.2k

点赞数 1

分类专栏： WEB前端开发

本文链接：https://blog.youkuaiyun.com/qyl_0316/article/details/107543310

版权

WEB前端开发专栏收录该内容

132 篇文章

订阅专栏

vue引用了第三方组件，有时候我们需要改写第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。

有些Sass 之类的预处理器无法正确解析 >>> 这时可以使用 /deep/ 操作符( >>> 的别名)

<style lang="scss" scoped>
  自定义class(外层) >>> 第三方组件class {
      具体的样式内容
  }
自定义class(外层) /deep/  第三方组件class {
      具体的样式内容
  }
  // 当然也可以直接这样写：
  >>> 第三方组件class {
	具体的样式内容
}
// 比如：
>>> .el-modal__header__title {
    width: 80px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium,PingFang SC;
    font-weight: bold;
    color: rgba(0,0,0,1);
    line-height: 22px;
}
 /deep/ 第三方组件class {
	具体的样式内容
}
// 比如
 /deep/ .el-icon-triangle-bottom {
    color: #b2b9cc;
    margin-left: auto;
    margin-right: 10px;
  }
</style>