容器查询和 :has() 是响应式天堂中的匹配。幸运的是，Chromium 105 中会同时集成这两项功能。这是一个大型版本，包含两项备受期待的自适应界面功能！
容器查询：快速摘要
借助容器查询，开发者可以查询父选择器的尺寸和样式信息，从而使子元素可以拥有其自适应样式设置逻辑，无论它位于网页上的哪个位置。
开发者现在还可以查询页内元素的尺寸，而不必依靠视口来设置输入的样式（例如可用空间）。此功能意味着组件拥有其自适应样式设置逻辑。这样会提高该组件的弹性，因为无论它出现在页面上的哪个位置，都附加了样式逻辑。
使用容器查询
如需使用容器查询进行构建，您必须先在父元素上设置包含。为此，请在父级容器上设置 container-type。您的卡片可能带有图片和一些文本内容，如下所示：
如需创建容器查询，请在卡片容器上设置 container-type：
.card-container {
container-type: inline-size;
}
将 container-type 设置为 inline-size 会查询父级的内嵌方向尺寸。在英语等拉丁语系中，这是指卡片的宽度，因为文本从左向右流入。
现在，我们可以使用该容器通过 @container 将样式应用于其任何子级：
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
:has() 父级选择器
借助 CSS :has() 伪类，开发者可以检查父元素是否包含具有特定参数的子元素。
例如，p:has(span) 表示段落 (p) 选择器，其中包含 span。您可以使用此元素设置父段落本身的样式，或设置其中的任何内容的样式。一个实用示例是 figure:has(figcaption)，用于为包含图片说明的 figure 元素设置样式。如需详细了解 :has()，请参阅 Jhey Tompkins 撰写的这篇文章。
容器查询和 :has()
您可以将 :has() 的父级选择功能与容器查询的父级查询功能相结合，创建一些真正动态的固有样式。
我们来深入展开第一个关于火箭卡的示例。如果您的卡片没有图片，该怎么办？也许您想增加标题的大小，并将网格布局调整为单列，使其在没有图片的情况下看起来更有意识。
在此示例中，包含图片的卡片采用两列网格模板，而不含图片的卡片则采用单列布局。此外，不含该图片的卡片的标题更大。如需使用 :has() 编写此代码，请使用以下 CSS。
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
您要查找的是一个类为 visual 的元素，以应用上面的两列样式。:not() 是另一个简洁的 CSS 函数。此规范与 :has() 属于同一规范，但存在时间较长，并且具有更好的浏览器支持。您甚至可以结合使用 :has() 和 :not()，如下所示：
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
在上面的代码中，您将编写一个选择器，用于为不包含 visual 类的卡片内的 h1 设置样式。通过这种方式，您可以非常清晰地调整字体大小。
总结
上面的演示显示了 :has()、:not() 和 @container 的组合，但是当您看到在多个位置使用同一元素时，容器查询的真正大放异彩。我们来添加一些样式，并并排展示这些卡片。
现在，您可以真正感受到现代 CSS 的强大力量。我们能够使用有针对性的样式编写清晰的样式，这些样式基于逻辑构建逻辑，并创建非常强大的组件。这两项强大功能在 Chromium 105 中推出，并在各大浏览器的支持方面越来越火，对界面开发者来说无比激动的时刻！