Chrome 正在覆盖我的 CSS 中指定的字体大小

Posted 2023-03-06

【中文标题】Chrome 正在覆盖我的 CSS 中指定的字体大小

【英文标题】：Chrome is overriding the specified font-size in my CSS

【发布时间】：2015-09-23 21:56:20

【问题描述】：

我是 html/css 的新手，但被指派完成一个 html 网页。当我为我的网页指定font-size 并惊讶地发现它已被我的浏览器（谷歌浏览器）调整时，但我不知道为什么。我在14px 指定了font-size，并被浏览器调整为14.3999996185303px，这让我的网页有点难看。我想了解浏览器何时会更改我指定的值以及如何强制浏览器使用我指定的值。如果有人可以向我推荐一些材料，这样我就可以很好地理解它，那就太好了。

【问题讨论】：

请分享您设置字体大小的 CSS 代码。

【参考方案1】：

如果您只需要更改几个元素上的font-size，您可以使用类或id 并在其中设置font-size: 14px。我认为问题在于 chrome 正在将一种样式应用于您的网页，该样式覆盖了您提供的样式。类上的样式总是会覆盖标签上的样式，id 上的样式总是会覆盖类上的样式。

【参考方案2】：

使用 Chrome 开发者工具确定导致某种样式的原因。

Chrome 开发者工具可让您分析元素并查看应用到该元素的所有样式。您可以查看每个规则的来源，以及哪些规则被其他规则覆盖。要分析页面上的某个元素，请右键单击该元素（例如，一段文本）并选择“检查元素”。您还可以手动打开开发工具并在 DOM（HTML 源代码的实时表示）中单击以选择某个 HTML 元素。

当您将鼠标悬停在 DOM 中的 HTML 元素（“元素”选项卡的主窗格）上时，它将在浏览器页面上突出显示。当您在 DOM 中单击它时，它将在右侧窗格中显示应用于它的 CSS 规则。对于每个选择器，您可以看到它来自哪个 CSS 文件。如果被覆盖，该规则将有一条线穿过它，如果它不相关，它将显示为灰色。

尝试使用此工具查看您的规则是否被某些东西覆盖。

在 CSS 中强制某些内容优先于其他所有内容。

通常，CSS 规则层次结构基于specificity。如果两条规则冲突，浏览器将使用具有更具体选择器的规则。您可以使用 !important 装饰器强制 CSS 规则优先于其他所有内容，甚至是之前覆盖它的内容。这甚至会覆盖浏览器规则，例如表单控件的样式。

避免使用它。这不是好的做法，因为当您有大量使用 !important 的 CSS 代码时，它会变得非常难以理解和调试。

要使用!important 装饰器，只需将装饰器放在分号之前。下面的示例演示了特异性，并使用装饰器覆盖了特异性。

p.test 
  color: #000000;
  text-decoration: underline;


p 
  /* this rule will be applied, even though the `p`
   * selector has a lower specificity than `p.test`. */
  color: #FF0000 !important;
  /* this rule will not be applied, because the
   * specificity is not being overridden. */
  text-decoration: none;

<p class="test">
  This is a paragraph.
</p>