使用容器大小和样式查询

容器查询使您能够根据特定容器的特征，为嵌套在该容器内的元素应用样式。查询根据查询条件对容器是否返回真或假。

容器查询与媒体查询类似。@media at-rule允许基于视口大小或其他设备特征为元素应用样式。同样，@container at-rule允许基于包含元素的大小或其他样式特征（而不是视口的）为元素应用样式。容器查询具有与媒体查询相同的语法规则和逻辑运算符。

@container <container-condition># {
  /* <stylesheet> */
}

容器查询有三种类型：

容器大小查询

大小查询使您能够基于包含元素的当前大小（包括方向和宽高比）为元素应用样式。包含元素需要被明确声明为大小查询容器。

容器样式查询

样式查询使您能够基于包含元素的样式特征为元素应用样式。任何非空元素都可以是样式查询容器。目前，样式查询唯一支持的样式特征是CSS自定义属性。在这种情况下，查询根据包含元素自定义属性的计算值返回真或假。当容器样式查询完全支持时，它们将使您能够基于任何属性、声明或计算值为任何元素的子代应用样式——例如，如果容器是display: inline flex或具有不透明的背景颜色。

容器滚动状态查询

滚动状态查询允许您基于滚动状态条件有选择地将CSS规则应用于容器的子代，例如查询的元素是否部分滚动或容器是否吸附到滚动吸附容器。包含元素需要被明确声明为滚动状态查询容器。

在本指南中，我们将通过查看以下内容来学习容器查询的基础知识：

1. 容器大小查询，
2. 命名容器以限制其范围，以及
3. 在@container at-rule的<container-condition>中使用style()函数表示法来创建具有自定义属性的样式查询。

滚动状态查询在使用容器滚动状态查询中讨论。