CSS 2022 增加的特性

1、容器查询@container：容器查询依据的是元素的父元素或者祖先祖先元素的大小。容器查询的属性有三个，分别是：

• container-type：标识一个作为被查询的容器，取值范围为size、inline-size、block-size、style、state；
• container-name：被查询的容器的名字；
• container：container-type和container-name的简写；

<div class="content">
  <span>背景色会随着元素的宽度而变化</span>
</div>

.content{
    width: 200px;
    height: 300px;
    background: purple;
    container:inline-size;
 }
 @container (inline-size > 300px){
   span{
     background: deeppink;
   }
 }

使用chrome浏览器，需要手动在chrome://flags页面开启Enable CSS Container Queries设置。

级联层：适用场景当我们需要覆盖组件原来的样式来应用我们自己的样式时，以前一般会用优先级更高的样式名覆盖，或者ID选择器或者嵌套多层或者!important来实现，而级联层可以很好的解决这个问题，如下：

<div id="content">
  Hello 级联层的使用
</div>

#content{
  width: 200px;
  height: 200px;
}
@layer A{
   div{
     color: aquamarine;
   }
}
@layer B{
  #content{
    color: cadetblue;
  }
}
@layer C{
  div{
    color: coral;
  }
}

多个级联层的优先级顺序为越写在后面的优先级越高。

2、伪类选择器:has() ：也可以叫做父类选择器，接受一个选择器组作为参数，通过它可以给有匹配子元素的父类应用一些样式，如下：

<div class="content">
  <span>Hello word</span>
</div>

.content{
  width: 200px;
  height: 200px;
  border:1px solid #666;
}
.content:has(span){
  color: aqua;
}

使用chrome浏览器，需要手动在chrome://flags页面开启Experimental Web Platform features设置。

3、accent-color：该属性可以在不改变浏览器默认表单组件基本样式的前提下重置表单组件的颜色，目前支持的HTMl元素有：

<input type=”checkbox”>
<input type=”radio”>
<input type=”range”>
<progress>