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>
}
下面举几个例子
- 第一个例子
<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)
- 第二个例子
<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里面
- 第三个例子
<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估计慢慢就退出历史舞台了
