在利用特殊性规则时要小心 CSS em 单位？

Posted 2023-03-06

【中文标题】在利用特殊性规则时要小心 CSS em 单位？

【英文标题】：Be careful with CSS em units when taking advantage of rules of specificity?

【发布时间】：2012-04-17 14:51:47

【问题描述】：

当使用 EM 单位而不是 PX 单位指定字体大小时，我无法编写可维护的 CSS 代码。我已经习惯了这样写 CSS 代码：

body font-size: 12px;
body .sidebar font-size:11px;
body .sidebar .loadmore font-size:10px;
body .sidebar .warning font-size:13px;

这个想法是，在整个网站的许多页面上，都有很多应该具有 12 像素字体大小的文本。我利用特殊性规则来覆盖网站特殊区域的 12px 字体大小。

假设我将上面的代码重写为：

body font-size: 12em;
body .sidebar font-size:11em;
body .sidebar .loadmore font-size:10em;
body .sidebar .warning font-size:13em;

如果我在上面的代码中将 px 替换为 em，我的理解是我失去了特异性规则的优势。代码的第 3 行将被解释为“10 em of 11 em of 12 em”，这与“覆盖所有以前的规则并使用 10 em of （默认值是什么？）”的含义完全不同。我说的对吗？

编辑如果我说的是正确的，那么如何编写字体大小规则，例如“对所有元素使用字体大小 X，但在侧边栏上使用字体大小 Y”？

【问题讨论】：

见我的例子jsfiddle.net/PJWrW。对于嵌套元素，使用乘以所需大小的值 - 例如，1.1em 或 110%。

@John 编辑我的原始回复以反映您自己的回复，但简而言之。 jnylen 通过他/她对比例因子的使用为您指明了正确的轨道。

【参考方案1】：

约翰，您所谈论的特殊性将以您所说的方式发生。为什么可以参考：http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/.

编辑 作为对您的编辑的回复，请考虑 jnylen 在您原始帖子的 cmets 中发布的内容。

您为 body font-size: 12em; 列出的 12 em 字体大小将默认字体大小缩放为当前大小的 12 倍。如果您想使用 em，您需要考虑您希望使用它们的比例并进行数学计算。如果要使用嵌套语句设置固定大小，则需要坚持固定属性（像素）。正如我链接的文章中所述，em 的优点是您可以设置默认大小，例如 12 px，然后使用 em 来缩放它们。例如在基于移动的网站中。

【讨论】：

谢谢你，我也想对你发表评论，但我很新，显然还没有完整的能力:)。

【参考方案2】：

是的，em 值在它们适用的元素嵌套时“相乘”在一起。这不一定是具体问题 - 如果您分别为 .loadmore 和 .sidebar 指定规则，您会看到同样的问题，因为 .sidebar 包含 .loadmore。

以下是使用此方法的示例：http://jsfiddle.net/PJWrW/

我通常使用px 或百分比单位来表示字体大小，以明确表明我正在设置绝对字体大小或修改父字体大小。

我有时使用em 单位来定义诸如填充和宽度之类的尺寸，因为em 单位基本上是当前字体大小下字母的宽度。

【参考方案3】：

据我所知，如果您使用 em 作为字体大小，则没有一种方法可以在设置特定大小的同时为左侧栏中（或其他地方）中的元素设置标准字体大小该侧栏中的一些元素。如果您使用 em，则必须指定该侧栏中所有元素的大小。

就我个人而言，我通常使用 px 来调整字体大小，只是因为您可以按照您在帖子中所说的那样为某些元素设置标准字体大小。

我听到的关于使用 em 而不是 px 的唯一令人信服的论点是关于缩放问题，这不再是一个真正的问题（如果你使用 px，IE6 不允许你手动更改字体大小，但大多数人暂时停止使用 IE6返回）我认为使用 em 作为优势的唯一真实情况是，如果您想实现用户可以通过 javascript 更改字体大小的功能，例如 here