• Vue3 中的 CSS 功能

    Vue3 中的 CSS 功能

    CSS 作用域

    1. 使用 scoped 后, 父组件的样式将不会渗透到子组件中. 不过子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响.

    2. 深度选择器 :deep()

      • 处于 scoped 样式中的选择器如果要做更深度的选择, 即影响到子组件, 可以使用 :deep 这个伪类

      • 父组件

        • <div class="test">
  <h3>Father-h3h3>
  <Son>Son>
div>

          • 1
          • 2
          • 3
          • 4
        • 

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8

      • 子组件

        • <div>
  <h3>Son-h3h3>
  <h2>Son-h2h2>
div>

          • 1
          • 2
          • 3
          • 4

      • 只有父组件的

        背景颜色发生了改变

      • 在这里插入图片描述

      • 如果修改父组件中的代码

        • .test :deep(h3) {
  background-color: #2ecc71;
}

          • 1
          • 2
          • 3

      • 在这里插入图片描述

      • 📕通过

    3. 插槽选择器 :slotted()

      • 默认情况下, 作用域样式不会影响到 渲染出来的内容, 因为他们被认为是父组件所持有并传递进来的

      • 父组件

        • <Son>
  <h4>哈哈哈,我是父组件传入的数据h4>
Son>

          • 1
          • 2
          • 3

      • 子组件

        • <div>
  <h3>Son-h3h3>
  <h2>Son-h2h2>
  <slot>slot>
div>

          • 1
          • 2
          • 3
          • 4
          • 5
        • 

          • 1
          • 2
          • 3
          • 4
          • 5

      • 如下图, 传入 的

        元素背景颜色并没有发生改变

      • 在这里插入图片描述

      • 修改子组件, 使用 :slotted 选择器

        • :slotted(h4) {
  background-color: #e67e22;
}

          • 1
          • 2
          • 3
        • 在这里插入图片描述

    4. 全局选择器 :global()

      • 如果想让一个样式规则应用到全局, 有两种方式
        • 第一, 创建两个
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
        • 在这里插入图片描述

      • 注入自定义的名字

        • 

          • 1
          • 2
          • 3
          • 4
          • 5
        • <div :class="levi.yellow">Yellow by Coldplaydiv>

          • 1

      • 与组合式 API 一同使用

        • 可以通过 useCssModule API 在 setup 或者