为何无法在容器查询中重新定义:Root的CSS自定义属性值？

核心原因 #

容器查询的作用域仅覆盖容器的后代元素，:root（对应<html>元素）是.my-container的祖先节点，不属于容器的后代范围，因此容器查询内针对:root的样式声明会被浏览器直接忽略。这就是边框样式能正常生效（.test是容器后代），但:root上的自定义属性修改毫无作用的原因。

可行解决方案 #

要实现自定义属性的复用，需将自定义属性挂载到容器元素本身，而非:root：

/* 把自定义属性绑定到容器，设置默认值 */
.my-container {
  container-type: inline-size;
  --bg-color: red;
}

/* 容器查询内修改容器上的自定义属性 */
@container (min-width: 500px) {
  .my-container {
    --bg-color: green;
  }
  .test {
    border: 5px solid black;
  }
}

.test {
  /* 读取容器上的自定义属性 */
  background-color: var(--bg-color);
}

这种方案的优势：

• 自定义属性的作用域与容器绑定，完全符合容器查询的规则
• 容器内的所有后代元素都能复用该自定义属性，满足你的复用需求
• 浏览器可以正确识别容器查询内的样式修改，因为.my-container是容器查询的目标元素

如果需要全局默认值，可以结合:root和变量回退机制：

:root {
  --default-bg-color: red;
}

.my-container {
  container-type: inline-size;
  --bg-color: var(--default-bg-color);
}

@container (min-width: 500px) {
  .my-container {
    --bg-color: green;
  }
}

内容的提问来源于Stack Exchange，提问作者Nicholas Westby