CSS外部样式表与嵌入式样式效果不一致及h1样式失效咨询

嘿，这几个都是CSS开发里超常见的优先级、加载顺序或者缓存坑，我帮你逐一拆解清楚：

问题1：外部样式表与嵌入式样式代码一致，但外部样式生效范围更小 #

这种情况大概率是加载顺序或优先级在搞鬼：

• 如果你在HTML里是先引入外部样式表，再写嵌入式<style>标签，那嵌入式样式会覆盖外部样式中选择器相同的规则——因为CSS遵循「后加载的样式覆盖先加载的」原则。哪怕代码完全一样，后出现的样式会优先生效，看起来就像外部样式的生效范围没那么大。
• 另外也得排查下外部样式表的引入路径有没有问题，比如路径写错、文件名大小写不匹配（部分服务器对大小写敏感），导致部分页面元素没加载到外部样式，只有嵌入式样式生效，自然会觉得外部样式范围小。

问题2：删除重复的旧<h1>样式后，标题变回黑色 #

既然两处代码完全相同，删除旧的后理论上剩下的样式应该正常生效，变回黑色说明剩下的样式没起作用，可能的原因：

• 浏览器缓存：浏览器可能缓存了旧的样式表，你删除旧样式后，浏览器没加载新的样式表，还是用的缓存版本（里面已经没有有效的<h1>样式了）。可以试试强制刷新页面（Ctrl+F5）或者清除浏览器缓存。
• 语法错误：检查下方保留的<h1>样式有没有语法问题，比如少写分号、括号不配对，或者被不小心注释掉了？哪怕只是一个小错误，都可能导致整个样式规则失效，浏览器就会用默认的黑色标题样式。
• 误操作：有没有可能删除旧样式的时候，不小心碰了下方的有效样式？比如删到了部分代码，导致它不再是完整的<h1>样式规则。

问题3：外部与嵌入式样式代码相同，但表现不同，删除嵌入式后样式丢失 #

这种情况最常见的原因是外部样式表没正确加载：

• 先确认外部样式表的引入路径是否正确，比如相对路径写错、文件位置移动后没更新路径，导致外部样式根本没加载成功，只有嵌入式样式在生效。删除嵌入式后，自然就没样式了。
• 同样可能是缓存问题：你修改了外部样式表，但浏览器还在使用缓存的旧版本，导致外部样式和嵌入式样式表现不同。强制刷新后应该能看到一致的效果。
• 还有一种隐性可能：你以为代码完全相同，但其实外部样式表的选择器有细微差异，比如外部是.page h1，而嵌入式是h1，只是你没注意到？这种情况下选择器特异性不同，表现自然不一样。

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