Question

我正在读一本名为“DOM脚本 - 使用javascript和文档对象模型进行Web设计”的书。在第11章中，我看到了如下所示的css文件。

body {
  font-size: 76%;
  font-family: "Helvetica","Arial",sans-serif;
}
body * {
  font-size: 1em;
}
a {
  font-weight: bold;
  text-decoration: none;
}
#navigation {
  font-family: "Lucida Grande","Helvetica","Arial",sans-serif;
}
#navigation a {
  text-decoration: none;
  font-weight: bold;
}
#content {
  line-height: 1.8em;
}
#content p {
  margin: 1em 0;
}
h1 {
  font-family: "Georgia","Times New Roman",sans-serif;
  font: 2.4em normal;
}
h2 {
  font-family: "Georgia","Times New Roman",sans-serif;
  font: 1.8em normal;
  margin-top: 1em;
}
h3 {
  font-family: "Georgia","Times New Roman",sans-serif;
  font: 1.4em normal;
  margin-top: 1em;
}
#imagegallery li {
  list-style-type: none;
}
dt {
  margin-right: 1em;
}
dd {
  margin-right: 3em;
}
textarea {
  font-family: "Helvetica","Arial",sans-serif;
}

在这里，我认为身体部位的“font-size：76％”是无用的，因为它将被body * part中的定义覆盖。那么，作家为什么要设计这样的CSS呢？

Answer 1

em单位是根据父母的字体大小来衡量的。

在这种情况下，父级（最终）是正文，它获得用户默认字体大小的76%。

Answer 2

字体的大小取决于两种品质。例如，这里非常明显em增加了百分比：http://jsfiddle.net/EQ3vF/1/

结果是完整字体大小的百分比。

Answer 3

规则body * { font-size: 1em; }根本不会影响body元素的字体大小，因为该元素与选择器body *不匹配（由body匹配所有后代。 {1}}元素，但不是body元素本身。）

因此font-size: 76%上body肯定会产生影响。它是否效果好是一个不同的问题。它的作用是将文档的基本字体大小设置为用户所选大小的76％（通过不更改浏览器默认字体大小或将其设置为某个值）。这种奇怪的通常原因是作者选择使用Arial字体并认为它在常见的默认字体大小中很难看。

这与选择器优先级无关。选择器body *和body从不适用于同一元素，因此不会出现优先级问题。

您在问题标题中提到em的使用，但在问题正文中没有。因此，很难说你的问题是什么，但它只是意味着元素的字体大小，除了在font-size的值中使用时，它意味着字体父元素的大小。特别是，body * { font-size: 1em; }将body元素的任何后代的字体大小设置为与body元素本身的字体大小相同。实际上，这会覆盖某些元素（如标题和input元素）的浏览器默认设置。但是这个设置本身可以被作者的其他设置覆盖，例如font: 2.4em normal h1在这种情况下（它是将font-size设置为2.4em等的简写）

选择器优先级和“em”的用法

3 个答案: