内嵌CSS失效求助：HTML文档中内部CSS无法生效怎么解决？

我仔细看了你的代码和问题描述，首先可以确定的是，你的内部CSS语法没有问题——body {background-color: red;}这条规则写法正确，HTML结构也符合规范，验证工具没报错也佐证了这一点。那咱们一步步排查可能导致CSS不生效的原因：

• 强制刷新浏览器缓存
  浏览器经常会缓存旧的页面资源，导致新修改的CSS无法即时生效。你可以尝试按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，跳过缓存加载最新的内容。

• 用浏览器开发者工具排查样式优先级
  按下F12打开开发者工具，切换到「Elements」面板，选中<body>标签，然后看右侧的「Styles」面板：

  • 如果background-color: red;这条规则被划掉了，说明有优先级更高的样式（比如外部CSS、内联样式）覆盖了它；
  • 如果这条规则根本没出现在面板里，那可能是浏览器没有加载到你的内部样式表，这时候可以检查「Sources」面板里是否能看到<style>标签的内容。

• 检查是否有隐性的语法错误
  虽然验证工具没报错，但有时候一些细微的拼写错误（比如你代码里<em>his is emphasized text</em>少了一个字母T）可能不会影响CSS，但极端情况下如果style标签内有其他语法错误（比如漏写分号、大括号），可能会导致后续规则失效。不过你的代码里style标签只有一条规则，所以这个可能性很低，但可以再仔细核对一遍。

• 确认浏览器的渲染模式
  你的DOCTYPE是<DOCTYPE HTML>，这是HTML5的正确声明，会让浏览器以标准模式渲染页面，不会出现怪异模式导致的CSS失效问题。不过可以在开发者工具的「Console」面板输入document.compatMode，如果返回CSS1Compat说明是标准模式，没问题。

如果以上步骤都试过还是没解决，你可以在开发者工具的「Console」面板看看有没有报错信息，这往往能给出关键线索。

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