CSS 中的容器查询

首先必须注册一个容器，并且可以查询它。

注册一个容器

使用选择器来注册容器。

.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中文网其他相关文章！