为何CSS设置的font-size不生效？附代码示例求解答

现有代码 #

CSS 代码 #

.navbar-brand{
  font-weight: bold;
  font-family: "Ubuntu";
  font-size: 2.5rem;
}

HTML 代码 #

<a class="navbar-brand" href="">tindog</a>

以下是font-size不生效的常见原因：

• CSS优先级被覆盖：若项目使用Bootstrap等框架，框架自带的.navbar-brand样式可能通过更具体的选择器（如nav .navbar-brand）或!important标记覆盖你的字号设置。打开浏览器开发者工具（F12）查看元素样式面板，被划掉的font-size旁会显示覆盖它的样式来源。

• 父元素强制继承字号：如果父元素设置了font-size并通过inherit强制子元素继承，或存在全局规则（如* { font-size: inherit !important; }），会导致自定义字号失效。通过开发者工具查看元素的计算后样式，确认字号是否继承自父元素。

• rem基准值被修改：rem基于根元素（<html>）的字号计算，若根元素字号被其他CSS调整，2.5rem的实际显示大小可能不符合预期。检查<html>标签的字号设置，或排查浏览器插件是否修改了页面默认字号。

• CSS加载顺序错误：若自定义CSS写在框架样式之前，相同优先级的样式会被框架的后续样式覆盖。需将自定义CSS放在框架CSS文件之后引入。

• 更高优先级选择器冲突：ID选择器（如#header .navbar-brand）或行内样式（<a style="font-size: 16px">）的优先级高于类选择器，会覆盖你的字号设置。检查元素是否存在行内样式，或项目中是否有更高优先级的选择器命中该元素。

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