CSS depth selector in VUE

Concept and Function

When a

A simple example:

<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>
Copy the code

This is a page file commonly seen in Vue projects. I reference the A-card component of Ant-Design-Vue in this page file. I want the title of the A-card component to be green, so I find the class value corresponding to the title of the A-card component. Added the following style code:

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

Obviously, the background color I added won’t work because of the impermeability of the Scoped property. In general, there are two approaches:

  1. Remove the scoped attribute. The style works, but this writing is global, and if you don’t rigorously name a class, you can contaminate the global style. This is equivalent to writing it in a global style file.

  2. Leave the scoped property and use the depth selector as follows

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

    View the browser and the above code is compiled into

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

    Obviously, by adding this attribute, we can achieve the desired effect without contaminating the global style

writing

<! -- use :v-deep -->
<style lang="scss" scoped>::v-deep .ant-card-head-title{ background: yellowgreen; }</style>
<! Use the >>> operator -->
<style scoped>
>>>.ant-card-head-title{
  background: yellowgreen;
}
</style>
<! /deep/ -->
<style scoped>
 /deep/.ant-card-head-title{
  background: yellowgreen;
}
</style>
<! Deep (<inner selector>) -->
<style lang="scss" scoped>
  :deep(.ant-card-head-title){
    background: yellowgreen;
  }
</style>
Copy the code

Both notation 1 and 4 support sASS preprocessors. However, in the new VUe3.0 single-file specification, if you still use script 1, you will encounter the following warning:

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

Version 1 is deprecated in Vue3.0, so you should use version 4 when developing vue3.0 projects.

The >>> operator does not support sASS preprocessor parsing, and the >>> operator has browser compatibility issues

Refer to the link

  1. VueLoader – Depth effect selector

  2. CSS explanation and usage of /deep/