vue中css功能总结

1.css作用域

在style标签上加上scoped,  该组件将有全局style变为局部style

      编译为：

2.深度选择器（样式穿透）

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

编译为：

.a[data-v-f3f3eg9] .b {
  /* ... */
}

通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式

 

3.插槽选择器

默认情况下，作用域样式不会影响到  渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标：

4.全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 

5.CSS Modules(组件使用css)

一个  //命名使用 //与组合式 API 一同使用 import { useCssModule } from 'vue' // 在 setup() 作用域中... // 默认情况下, 返回

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新