首先必须注册一个容器，并且可以查询它。
使用选择器来注册容器。
.parent {
container-name: myname;
container-type: inline-size;
... other code
}
或者，使用简写选项
.parent {
container: myname / inline-size;
... other code
}
注册时，必须指定两个详细信息 - 类型和名称。
容器类型：...
容器名称：;
如果您可能存在多个容器的场景，则标识容器特别有用。
容器查询以 @container at-rule 开头，后跟容器名称和功能查询。
div {
font-size: 2em;
}
@container myname (width: > 30ch)
{
div {
font-size: 3em;
}
}
容器查询，如果特征宽度大于 30ch，则将 myname 容器内的 div 的字体大小设置为 3em。
尺寸查询...
样式查询...
要检查价值的财产。
例如
@container contname style('background-color: blue') {
...
styles
...
}
如果容器名称的背景颜色为蓝色，则容器查询应用样式
and、or 和 not 可用于创建复合查询
例如
@container myname (width>30ch) and (height>100px) {
...
}
@container myname not (color: blue) {
...
}
容器查询可以嵌套在其他容器查询中。
例如
@container myname (width>30ch) {
...
@container myname (background-color: blue) {
...
}
@container myname (background-color: red) {
...
}
}
以上是CSS 中的容器查询的详细内容。更多信息请关注PHP中文网其他相关文章！
