CSS @container 規則

定義和用法

CSS @container 規則用于根據容器的大小或樣式為其他元素定義樣式。

樣式聲明會根據條件進行過濾，如果條件為真，則應用于容器。當容器的大小或樣式值發生變化時，條件會被重新評估。

提示：在 CSS 中，容器是一個包裹其他元素的元素，用于將它們分組以便進行樣式設置。

實例

根據容器的大小或樣式為其他元素定義樣式：

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Add styles if myContainer is less than 500px wide */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

親自試一試

CSS 語法

@container containername (containerquery) {
  css declarations
}

屬性值

瀏覽器支持

表格中的數字表示首個完全支持該 @ 規則的瀏覽器版本。