手册
目录
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;
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
@container containername (containerquery) {
css declarations
}
| 值 | 描述 |
|---|---|
| containername | 可选。容器的名称。 |
| containerquery |
必需。要评估的条件。如果条件为真，则应用样式。 可以在 containerquery 中使用以下描述符：
|
表格中的数字表示首个完全支持该 @ 规则的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 105 | 105 | 110 | 16 | 91 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
