规则 at-container CSS

定义和用法

CSS @container 规则用于根据容器的大小或样式为其他元素定义样式。

样式声明会根据条件进行过滤,如果条件为真,则应用于容器。当容器的大小或样式值发生变化时,条件会被重新评估。

提示:在 CSS 中,容器是一个包含其他元素的元素,用于将它们分组以便进行样式设置。

实例

根据容器的大小或样式为其他元素定义样式:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* 如果 myContainer 的宽度小于 500 像素,则添加样式 */
@container myContainer (width < 500px) {
  .child {
    宽度:50%;
    边框:2 像素实线栗色;
    背景颜色:鲑鱼色;
  }
}

亲自试一试

CSS 语法

@container containername (容器查询) {
  CSS 声明
}

属性值

描述
containername 可选。容器的名称。
容器查询

必需。要评估的条件。如果条件为真,则应用样式。

可以在 容器查询 中使用以下描述符:

  • 宽高比
  • 块大小
  • 高度
  • 内联大小
  • 方向
  • 宽度

浏览器支持

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

Chrome Edge Firefox Safari Opera
105 105 110 16 91