CSS 容器查询与 :has()：现代响应式新范式

响应式设计长期依赖媒体查询，但媒体查询有个根本局限：它只知道视口的尺寸，不知道组件的尺寸。容器查询与 :has() 的到来，正在改变这套范式。

容器查询：让组件自己响应

一个侧边栏里的卡片和主内容区的卡片，需要不同的布局，但它们的视口是同一个。容器查询让你基于父容器的尺寸做响应：

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

现在组件可以「自带响应式逻辑」，放到哪里都能正确适配。这对设计系统意义重大——组件终于可以真正复用而不依赖页面上下文。

:has()：向后选择的突破

CSS 选择器历史上只能「向下/向前」选择，:has() 打破了这一点，让你能基于子元素状态选中父元素：

/* 包含图片的卡片加边框 */
.card:has(img) {
  border: 1px solid #ddd;
}

它与 :has() 配合表单状态，还能实现很多过去需要 JS 的交互效果，例如「某个复选框被选中时改变兄弟元素」。

两者的化学反应

容器查询 + :has() 组合起来，能构建高度自治的组件：

.field:has(input:invalid) {
  border-color: red;
}

表单字段「自己」感知到无效输入并高亮，无需 JS 监听。

兼容性与渐进增强

这两个特性在 2026 年的现代浏览器中已广泛支持。为稳妥起见，可为旧浏览器提供媒体查询的降级方案，用 @supports 做特性检测。

结语

容器查询与 :has() 代表的，是 CSS 从「页面级样式」走向「组件级样式」的进化。拥抱它们，你的样式表会变得更内聚、更可维护。