标签：vue title deep ant 写法 选择器 card

原文地址:

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

vue中的css深度选择器

概念与作用

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

一个简单的例子：

  html 复制代码

<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值，添加了如下样式代码：

  html 复制代码

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

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

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

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

     html 复制代码

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

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

     css 复制代码

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

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

写法

  html 复制代码

<!-- 写法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/的解释和用法

作者：溜溜球形废物
链接：https://juejin.cn/post/6978781674070884366
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标签：vue,title,deep,ant,写法,选择器,card
From： https://www.cnblogs.com/dirgo/p/17656087.html