css原生嵌套规则和@scope作用域用法

css原生嵌套规则
其实，CSS嵌套和 Sass、Less 的嵌套类似
css原生嵌套规则可以将选择器嵌套到另一个选择器中，但是必须是以符号开头，例如&(父级(.box)本身自己) , .(class选择器) , #(id选择器) , @(媒体查询) , : , :: , + , > , ~ , *, [ 开头。
也就是说嵌套的选择器中不能以html元素标签为开头，例如下面这样，是不起作用的

.box{
  h1{
    color: yellowgreen;
  }
}

如果想要起作用，标签前面必须得加上&

.box{
  & h1{
    color: yellowgreen;
  }
}

还有一种情况也需要注意，就是嵌套伪类选择器时，加&的区别:

.box{
  ::after{}
  :hover{
    color: red;
  }
  :target{}
}

不加&就会选择所有的子孙元素，而不是父级(.box)本身，加&就是父级(.box)本身

.box{
  &::after{}
  &:hover{
    color: red;
  }
  &:target{}
}

css原生@scope作用域用法
@scope的语法规则

@scope [(<scope-start>)]? [to (<scope-end>)]? {
  <rule-list>
}

下面举几个例子

1. 第一个例子

<div class="box">
  <div class="red">我是red-1</div>
  <div class="blue">我是blue</div>
</div>
<div class="red">我是red-2</div>

@scope (.box){
  .red{
    color:red;
  }
}

第一个例子.png

在这个例子中，.red 的样式只会作用在.box 里面，不会影响到外面的 .red使用的语法是@scope (.box)

2. 第二个例子

<div class="box">
  <div class="red">我是red-1</div>
  <div class="item">
    <div class="red">我是red-2</div>
  </div>
  <div class="red">我是red-3</div>
  <div>
    <div class="red">我是red-4</div>
  </div>
</div>
<div class="red">我是red-5</div>

@scope (.box) to (.item){
  .red{
    color: red;
  }
}

第二个例子.png

这个例子使用了完整的@scope (<scope-start>) to (<scope-end>) 语法，.red的样式只会作用在.box里面，但是不会作用在.item里面

3. 第三个例子

<div>
  <div>
    <style>
      @scope{
        .red{
          color: red;
        }
      }
    </style>
    <div class="red">我是red-1</div>
    <div class="red">我是red-2</div>
  </div>
  <div class="red">我是red-3</div>
</div>

第三个例子.png
这个例子中，style标签写在HTML结构中，只写了@scope，省略了 <scope-start>，它就会自动以style的父元素的位置控制作用域。

目前chrome118已经支持了，相信这么好用的东西，各大浏览器后续都会跟进支持，真是春天呢，less，sass估计慢慢就退出历史舞台了