首先必須註冊一個容器，並且可以查詢它。

註冊一個容器

使用選擇器註冊容器。

.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) {
            ...
        }
    }