CSS中字体加粗无效？检查_font-weight和选择器优先级匹配问题？

本文共计944个文字，预计阅读时间需要4分钟。

在许多情况下，使用 `font-weight` 或 `bold` 或 `700` 来加粗文本可能不会生效。这并非语法错误，而是因为 CSS 层叠规则中的优先级问题。基本原因是这些属性在 CSS 中有更高级别的规则覆盖了它们。

浏览器开发者工具中，查看该元素的 `Computed` 面板，展开 `font-weight` 属性，点击右侧箭头可以看到所有相关属性的声明。带有删除线的属性表示已被覆盖。

• 检查是否有父元素设置了 font-weight: normal 且子元素没显式重写（继承值会生效）
• 确认没用 !important 的其他规则在后面强行设回 400
• 注意某些 UI 框架（如 Ant Design、Element Plus）会在组件内部用高特异性选择器重置字体粗细

选择器优先级不够导致 font-weight 被忽略

比如你写了 .btn { font-weight: 700; }，但框架样式用了 button.btn-primary 这类组合选择器，它的优先级就高于单类名，你的规则自然失效。