创建全局选择器

global伪类创建一个全局的css样式。不管前面有哪些选择器，他都会忽略掉。

.son :global(.green) {
    color: green;
  }

深度选择器

使用 scoped 后，父组件的样式将不会渗透到子组件中。 如果想要让父组件的样式作用于子组件。可以通过deep伪类。

.hello :deep(.son){
  color: orange;
}

子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。

但是如果子组件有多个根组件，那么父组件的作用域将不会作用域任何根组件上面。

useCssModule

可以通过上面这个api获取css module变量。并且可以修改css module变量的值。

// 这里获取到class的类名有啥用呢？
  let zh = useCssModule("zh")
  // zh.bgBlue = "ppppp"
  console.log(zh.bgBlue)

这里并不是在setup中通过useCssModule导入再导出后，才可以使用css module变量的。

css的v-bind

可以直接使用js中的变量。通过v-bind绑定，并可以做到响应式。

如果获取对象中的值，将通过""包裹。

let llm = ref({
    bg: "blue",
    color: "#fff"
});
.bgBlue {
    background: v-bind("llm.bg");
    color: v-bind("llm.color")
}

如何设置插槽的样式

以前都是在定义插槽的时候，在外成包裹一个div元素，来设置插槽的样式。因为插槽的内容是外界传递进来的。

其实是可以通过:slotted伪类来控制插槽的样式的。

:slotted(.slot) {
    position: absolute;
    top: 10px;
    left: 10px;
}