/deep/ 深度选择器

最新推荐文章于 2024-08-01 14:27:03 发布

圣焱

最新推荐文章于 2024-08-01 14:27:03 发布

阅读量350

点赞数

分类专栏： vue css 文章标签： css less

本文链接：https://blog.csdn.net/Bruce_byan/article/details/118495013

版权

在CSS中，使用/deep/深度选择器可以在style scoped的情况下穿透组件的样式隔离，允许开发者修改公共组件的样式。这在需要定制化公共组件而避免样式冲突时非常有用。

摘要由CSDN通过智能技术生成

当style添加scoped时，表示组件私有化，可使组件模块化，其样式不会污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。
但这时需要引用公共组件时，无法改变公共组件样式，此时需要/deep/深度选择器，此时可以修改公共组件样式。
例如a-modal，如下：
基础a-modal如下图：
在这里插入图片描述
修改如下：
vue

<div class="box">
    <a-modal v-model="visibles" :title="title" class="modal" :footer="null" :style="{marginTop: clientHeight < 800 ? videoOrAssess ? '-60px' : '50px' : videoOrAssess ? '10px' : '50px'}" :width="width" @ok="handleOk" @cancel="cancel">
      <div style="height: 240px;width: 100%">
        <a-form layout="horizontal" style="width: 100%">