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
}

属性值

浏览器支持

表格中的数字表示首个完全支持该 @ 规则的浏览器版本。