vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什么?

47,583 阅读1分钟

vue中的css深度选择器

概念与作用

<style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,父组件的样式将不会渗透到子组件。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用深度选择器。

一个简单的例子:

<template>
  <div class="not-found">
    <a-card title="Card title">
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
  </div>
</template>

这是vue项目中通常会看到的一个page文件,我在其中引用了ant-design-vue 的 a-card 组件, 我希望在这个page文件中,a-card组件的标题为绿色,于是我找到a-card组件title对应的class值,添加了如下样式代码:

<style lang="scss" scoped>
  .ant-card-head-title{
    background: yellowgreen;
  }
</style>

显然,由于scoped属性的防渗透作用,我添加的背景色并不会生效。通常,会有两种处理方法:

  1. 将scoped属性去掉。样式生效了,但是这种写法是作用到全局的,如果不严格规范class的命名,非常容易污染全局样式。这种写法,其实等同于写在全局样式文件中。

  2. 保留scoped属性,使用深度选择器,代码如下

    <style lang="scss" scoped>
      :deep(.ant-card-head-title){
        background: yellowgreen;
      }
    </style>
    

    查看浏览器,以上代码被编译成

    [data-v-e44d851a] .ant-card-head-title {
        background: yellowgreen;
    }
    

    很明显,添加了这个属性之后,可以达到我们想要的效果,而且不会污染全局样式

写法

<!-- 写法1 使用::v-deep -->
<style lang="scss" scoped>
  ::v-deep .ant-card-head-title{
    background: yellowgreen;
  }
</style>
<!-- 写法2 使用>>> 操作符-->
<style scoped>
>>>.ant-card-head-title{
  background: yellowgreen;
}
</style>
<!-- 写法3 使用/deep/ -->
<style scoped>
 /deep/.ant-card-head-title{
  background: yellowgreen;
}
</style>
<!-- 写法4 使用:deep(<inner-selector>) -->
<style lang="scss" scoped>
  :deep(.ant-card-head-title){
    background: yellowgreen;
  }
</style>

写法1 和写法4,都支持sass预处理器。但是在新的vue3.0 单文件规范中,如果你还是使用写法1,会碰到如下警告:

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

写法1在vue3.0中已经被弃用了,以后小伙伴们在开发vue3.0项目的时候,还是使用写法4吧~,有一说一,写法4在语义上也更有助于理解。

关于写法1和写法3,主要是不支持sass预处理器的解析,且>>>操作符存在浏览器兼容性问题,所以朋友们还是谨慎使用吧~

参考链接

  1. vueLoader-深度作用选择器

  2. css关于/deep/的解释和用法