当 CSS 样式不生效时，应从以下几个方面排查：确认样式表的链接是否正确。检查是否有其他 CSS 规则覆盖了您要应用的样式。确保您用于选择元素的 CSS 选择器是正确的。检查 HTML 元素是否已内联了样式。尝试清除浏览器的缓存或强制刷新页面。检查网络工具以确保 CSS 文件已加载。使用 CSS 验证工具检查 CSS 规则的语法是否正确。确保您的 CSS 规则具有足够的优先级。确认您使用的 CSS 属性和值与目标浏览器兼容。
为什么 CSS 样式不生效？
当 CSS 样式不生效时，可以从以下几个方面进行排查：
1. 样式表链接错误
确认样式表是否已正确链接到 HTML 文档。检查 <head> 部分中 <link> 标签的 href 属性是否指向正确的 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
2. 样式覆盖
检查是否有其他 CSS 规则覆盖了您要应用的样式。例如，外部样式表中的规则可能比内部样式表中的规则优先。
3. 选择器不正确
确保您用于选择元素的 CSS 选择器是正确的。例如，如果要为 div 元素设置样式，则选择器应为 div，而不是 p。
4. 元素样式已内联
检查 HTML 元素是否已内联了样式。内联样式将覆盖 CSS 样式表中的样式。要解决此问题，请删除内联样式或将其移至样式表。
5. 浏览器缓存
浏览器有时会缓存 CSS 文件。当您更改 CSS 文件时，浏览器可能仍会加载缓存版本。尝试清除浏览器的缓存或强制刷新页面（按 Ctrl + F5）。
6. CSS 文件未加载
检查网络工具（如 Chrome DevTools）以确保 CSS 文件已加载。如果文件未加载，请检查服务器端错误或防火墙限制。
7. 样式规则无效
确保 CSS 规则语法正确。任何语法错误都可能导致规则失效。使用 CSS 验证工具（如 W3C Validator）来检查错误。
8. 优先级问题
CSS 规则具有优先级，更高级别的规则（例如，内联样式）将覆盖更低级别的规则。确保您的规则具有足够的优先级以覆盖其他样式。
9. 浏览器兼容性
不同的浏览器对 CSS 标准的支持有所不同。确保您使用的 CSS 属性和值与目标浏览器兼容。
