CSS——深度选择器 deep

41 阅读1分钟
<!-- 写法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,会碰到警告

推荐写法4