CSS :not选择器在HTML中失效：如何仅居中主标题

你的问题出在CSS选择器的逻辑上——.container:not(.h2) 选中的是所有没有.h2类的.container元素，而你的外层<div class="container">本身就不带.h2类，所以整个容器被设置为flex居中后，里面的所有子元素（包括<h1>和那个带.h2的子容器）都会继承这个居中效果，导致<h2>也跟着居中了。

下面给你几个针对性的解决方案，按简洁度排序：

方案1：直接给<h1>设置文本居中（最推荐） #

既然需求只是让主标题居中，用text-align就足够了，不需要flex布局，代码最简洁：

.container h1 {
  text-align: center;
}

方案2：用flex单独作用于<h1> #

如果因为特殊需求必须用flex布局（比如需要垂直居中），可以直接选中<h1>并设置flex：

.container > h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 确保占满父容器宽度，水平居中才生效 */
}

方案3：用:not()排除指定子元素 #

如果你坚持要用:not()语法来实现，应该调整选择器的作用范围——选中.container的直接子元素中，不带.h2类的元素（也就是<h1>）：

.container > *:not(.h2) {
  display: flex;
  justify-content: center;
  align-items: center;
}

这样修改后，就只有主标题<h1>会被设置为居中，.h2容器内的<h2>不会受到影响。

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