Question

我是html / css的新手，但被指派完成html网页。当我为我的网页指定font-size时，我惊讶地发现它是由我的浏览器（谷歌浏览器）调整的，但我不确定原因。我在font-size指定了14px，浏览器将其调整为14.3999996185303px，这使我的网页有点难看。我想了解浏览器何时更改我指定的值以及如何强制浏览器使用我指定的值。如果有人可以将我推荐给某些材料，那将是很好的，所以我可以很好地理解它。

Answer 1

如果您只需更改几个元素的font-size，则可以使用类或ID并在其中设置font-size: 14px。我认为问题在于chrome正在为您的网页应用一种风格，这种风格会覆盖您提供的风格。类上的样式将始终覆盖标记上的样式，而id上的样式将始终覆盖类上的样式。

Answer 2

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

Chrome开发者工具允许您分析元素并查看正在应用的所有样式。您可以查看每个规则的来源，以及其他规则覆盖的规则。要分析页面上的某个元素，请右键单击该元素（例如，一段文本）并选择“Inspect Element”。您也可以手动打开开发工具，然后在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>

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

2 个答案: