如何使用:not伪类，无需覆盖实现非<header>下<h1>元素变红？

可以使用:not()结合:is()选择器实现单条CSS声明，精准排除<header>标签内所有层级的<h1>元素，无需覆盖样式：

h1:not(:is(header h1)) { color: red; }

为什么你的尝试没生效？ #

• 你写的:not(header) h1逻辑错误：这个选择器是匹配所有非header元素的后代h1，而<body>本身就是非header元素，所以<body>内的所有h1（包括<header>里的h1，因为<header>是<body>的后代）都会被选中，自然达不到排除效果。
• body > h1稳定性不足的原因是：它只能选中<body>的直接子元素h1，如果h1嵌套在其他容器（比如<section>、<div>）里，就不会被设置为红色，覆盖范围不够全面。

方案优势 #

• 单条CSS声明完成需求，无需先设置全局样式再覆盖；
• 不管<h1>在<header>内的嵌套层级如何（比如<header>里的<div>下的<h1>），都能准确排除；
• 所有不在<header>内的<h1>都会被设置为红色，覆盖范围完整。

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