大家好，我是CUGGZ。Chrome105beta于2022年8月4日发布，预计将在2022年8月下旬稳定。@container（容器查询）和:has()（父选择器）这两个强大的新反应式API即将登陆Chrome105.下面就来看看这两个强大功能的精彩使用吧！@container：容器查询容器查询使开发人员能够查询父选择器的大小和样式信息，使子元素无论位于网页的哪个位置，都能够具有响应式样式逻辑。开发人员现在还可以查询页面内元素的大小，而不是依赖视口来设置可用空间等输入的样式。此功能意味着该组件拥有其响应式样式逻辑。这使得组件更具弹性，因为无论它出现在页面的哪个位置，样式逻辑都会附加到它。目前浏览器对容器查询的支持如下：要使用容器查询，首先要在父元素上设置container-type，用于声明该元素是查询容器，定义查询容器的类型。声明这个属性意味着告诉浏览器在这个元素上创建一个容器上下文，稍后可能会查询到。看个例子，有一张卡片，图文内容如下：要创建容器查询，首先要在卡片容器上设置容器类型（container-type）：.card-container{container-type:inline-size;}将container-type设置为inline-size将查询父级的inline-direction大小。在像英语这样的拉丁语中，这就是卡片的宽度，因为文本是从左到右内联排列的。我们现在可以通过@container将样式应用到它的任何孩子：.card{display:grid;grid-template-columns:1fr1fr;}@container(max-width:400px){.card{grid-template-columns:1fr;}}这里，当容器的宽度小于等于400px时，@container中的样式才会生效。Dmeo:https://codepen.io/web-dot-dev/pen/dymdbpghas():ParentSelectorCSS:has()伪类使开发人员能够检查父元素是否包含具有特定参数的子元素。例如，p:has(span)表示其中包含跨度的段落(p)选择器。您可以使用它来设置父元素（段落）本身的样式，或设置其子元素的样式。当前浏览器对父选择器的支持如下：我们可以将:has()的父选择功能与容器查询的父查询功能结合起来，创建一些真正动态的样式。让我们在上面的示例的基础上，如果有没有图像的卡片，则增加标题大小，并将网格布局调整为单列。如下图所示：本例中，有图片的卡片采用两栏布局，无图片的卡片采用单栏布局。此外，没有图像的卡片有更大的标题。使用:has()来写这个：.card:has(.visual){grid-template-columns:1fr1fr;}上面的代码正在寻找具有.visual类的元素来应用两列样式。另一个简洁的CSS函数是:not()，它与:has()具有相同的规范，但存在时间更长，并且具有更好的浏览器支持。我们可以组合:has()和:not()如下：.card:not(:has(.visual))h1{font-size:4rem;}不包含.visual类的卡片的样式。Demo:https://codepen.io/web-dot-dev/pen/JjLpPKv总结上面的例子结合使用了:has(),:not()和@container。在这些代码中添加一些样式，将这些卡片并排显示在一个网格中，效果如下：Demo：https://codepen.io/web-dot-dev/pen/XWEZrje通过上面的例子，可以看到现代CSS是如此强大。期待这两个强大的特性登陆Chromium105，获得更多浏览器的支持！参考：https://developer.chrome.com/blog/has-with-cq-m105/
