CSS选择器异常：footer内h标签选择代码误选全局h标签

这是个非常典型的CSS选择器语法坑，很多刚接触或者不常写复杂选择器的开发者都会踩！我当初刚学CSS的时候也犯过一模一样的错😅

你写的代码：

footer h1,h2,h3,h4,h5,h6{ color: #fff; margin: 10px auto; }

这里的逗号是用来分隔独立的选择器组的，所以浏览器会把它解析成6个完全独立的选择器：

• footer h1（正确选中footer内的h1）
• h2（全局所有h2，不管在不在footer里）
• h3（全局所有h3）
• ...以此类推到h6

这就是为什么footer外的标题也被选中了——你只给h1加上了footer的限定，后面的h2-h6都是全局生效的。

正确写法 #

方法1：给每个标题选择器都加上footer前缀

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { 
  color: #fff; 
  margin: 10px auto; 
}

这种写法最直观，兼容性也拉满，支持所有现代浏览器和旧版浏览器。

方法2：使用:is()伪类简化代码

如果你的项目不需要兼容IE11及更早的旧版浏览器，可以用:is()伪类来精简代码：

footer :is(h1, h2, h3, h4, h5, h6) { 
  color: #fff; 
  margin: 10px auto; 
}

:is()会把括号内的所有选择器都绑定到前面的footer上下文，相当于自动给每个标题加上footer前缀，代码更简洁易维护。

额外小提示 #

如果你的footer是带特定类或ID的容器，比如.site-footer或者#main-footer，建议用更具体的选择器，避免和页面其他footer（如果有的话）产生样式冲突。

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