未添加指定类的元素为何仍应用了CSS规则？

你的CSS选择器写法犯了一个常见的语法错误：
在CSS中，逗号是用来分隔完全独立的选择器的。你写的 .info-specs h2, h3, h4, h5 会被浏览器解析成四个独立的选择器：

• .info-specs h2（仅匹配.info-specs下的h2）
• h3（匹配所有全局h3）
• h4（匹配所有全局h4）
• h5（匹配所有全局h5）

这就是为什么不在.info-specs内的h5也会被应用样式的原因。

正确的写法 #

如果要让样式仅作用于.info-specs类元素下的h2、h3、h4、h5，需要给每个标题选择器都加上.info-specs前缀：

.info-specs h2, .info-specs h3, .info-specs h4, .info-specs h5 {
    font-size: 1.5em;
    text-transform: none;
}

或者用现代浏览器支持的原生CSS嵌套语法简化：

.info-specs {
  h2, h3, h4, h5 {
    font-size: 1.5em;
    text-transform: none;
  }
}

这样修改后，只有嵌套在.info-specs元素内的标题标签才会应用该样式，全局的h5就不会被影响了。

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