如何通过@container查询修改含container-type:inline-size元素的CSS属性

问题原因 #

你当前的代码里，@container查询默认匹配祖先容器，在查询内部选择.card时，实际是在找当前容器后代里的.card元素，而非容器本身，所以无法修改.card的背景色。

方法1：使用:self伪类（现代浏览器支持） #

直接在@container内部用:self选中当前容器元素，就能修改它的样式：

.card {
  container-type: inline-size;
  background-color: antiquewhite;
}
.card--1 {
  width: 200px;
}
.card--2 {
  width: 300px;
}

@container (min-width: 250px) {
  :self {
    background-color: aqua;
  }
  .card__title {
    color: red;
  }
}

:self是专为容器查询设计的伪类，用来指代触发查询的容器本身，完美匹配需求。

方法2：CSS变量兼容方案（适配更多浏览器） #

如果需要兼容不支持:self的浏览器，可通过CSS变量间接修改容器样式：

.card {
  container-type: inline-size;
  --card-bg: antiquewhite;
  background-color: var(--card-bg);
}
.card--1 {
  width: 200px;
}
.card--2 {
  width: 300px;
}

@container (min-width: 250px) {
  .card {
    --card-bg: aqua;
  }
  .card__title {
    color: red;
  }
}

把容器背景色绑定到CSS变量上，在@container里修改变量值，容器会自动读取更新后的变量，实现样式变化，全程无需修改HTML结构。

内容的提问来源于stack exchange，提问作者Everettss