上一章已经讲过了:deep(),其实还有两个选择器可以补充

1.插槽选择器

A 组件定义一个插槽

  1. <template>
  2. <div>
  3.   我是插槽
  4.   <slot></slot>
  5.   </div>
  6. </template>
  8. <script>
  9.   export default {}
  10. </script>
  12. <style scoped>
  14. </style>

在App.vue 引入

  1. <template>
  2.     <div>
  3.         <A>
  4.             <div class="a">私人定制div</div>
  5.         </A>
  6.     </div>
  7. </template>
  9. <script setup>
  10. import A from "@/components/A.vue"
  11. </script>
  13. <style lang="less" scoped>
  14. </style>

在A组件修改class a 的颜色

  1. <style scoped>
  2. .a{
  3.     color:red
  4. }
  5. </style>

无效果
image.png
默认情况下，作用域样式不会影响到 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。
解决方案 slotted

  1. <style scoped>
  2.  :slotted(.a) {
  3.     color:red
  4. }
  5. </style>

image.png

2.全局选择器

在之前我们想加入全局 样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案

  1. <style>
  2.  div{
  3.      color:red
  4.  }
  5. </style>
  7. <style lang="less" scoped>
  9. </style>
  1. <style lang="less" scoped>
  2. :global(div){
  3.     color:red
  4. }
  5. </style>

效果等同于上面

3.动态 CSS

单文件组件的