CSS @container规则疑问：为何.blog-list生效而article无响应？

我在理解CSS的@container规则时遇到了问题：该规则在.blog-list容器上能正常修改article的背景色，但在article容器上尝试根据其尺寸修改.article-content的文本颜色时毫无响应。

我一开始以为只有特定属性能被修改，尝试调整属性后没有变化；之后又修改了@container article的条件参数（比如改成max-width:300px等），问题还是没解决。

按照我的理解，声明@container XY时，只要设置了container-name:XY的元素符合条件，就会执行对应的样式规则，那我到底遗漏了什么关键点？

HTML代码 #

<div class="blog-list">
  <article>
    <figure>
      <img src="https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image">
    </figure>
    <div class="article-content">
    <h3><a href="#">Mon titre</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus erat neque, eu pulvinar justo efficitur et. Vivamus vel aliquam massa, rutrum sollicitudin ante. </p>
    <span class="link">En savoir plus</span>
    </div>
  </article>
  <article>
    <figure>
      <img src="https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image">
    </figure>
    <div class="article-content">
    <h3><a href="#">Mon titre</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus erat neque, eu pulvinar justo efficitur et. Vivamus vel aliquam massa, rutrum sollicitudin ante. </p>
    <span class="link">En savoir plus</span>
    </div>
  </article>
  <article>
    <figure>
      <img src="https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image">
    </figure>
    <div class="article-content">
    <h3><a href="#">Mon titre</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus erat neque, eu pulvinar justo efficitur et. Vivamus vel aliquam massa, rutrum sollicitudin ante. </p>
    <span class="link">En savoir plus</span>
    </div>
  </article>
</div>

CSS代码 #

.blog-list {
  container-type: inline-size;
  container-name: blog;
}

article {
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  border-radius: 8px;
  overflow: hidden;
  background: yellow;
  container-name: article;
}

.article-content {
  padding: clamp(10px, 2.5vw, 2em) clamp(10px, 3vw, 2em);
  color: blue;
}

@container blog (max-width: 480px) {
  article {
    background: red;
  }
}

@container blog (min-width: 900px) {
  article {
    background: green;
  }
}

@container article (min-width: 200px) {
  .article-content {
    color: pink;
    background: pink;
  }
}

问题解答 #

你遗漏的核心点是：article元素只设置了container-name，但没有定义container-type。

CSS容器查询的生效前提是：容器元素必须通过container-type指定尺寸上下文（比如inline-size、size等），它告诉浏览器这个元素要作为“尺寸容器”，允许子元素基于它的尺寸应用样式。你之前的.blog-list能正常触发查询，就是因为给它设置了container-type: inline-size;，而article缺少这个关键属性，浏览器根本不知道要基于它的什么尺寸来判断条件，所以@container article的规则完全不会生效。

修复方法 #

给article添加container-type属性，比如常用的inline-size（基于容器的内联方向尺寸，也就是水平宽度）：

article {
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  border-radius: 8px;
  overflow: hidden;
  background: yellow;
  container-name: article;
  container-type: inline-size; /* 新增这一行 */
}

添加后，@container article (min-width: 200px)的规则就会根据article的宽度触发，.article-content的样式会按预期变化。

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