0

这可能有点愚蠢，但我遇到了 div 内文本的字体大小问题。

在我的 CSS 中，我使用过

*{
   font-size: 16px;      
 }
 #newsletter{
   font-size: 14px;
 }

当我这样做时，Chromes Element Inspector 显示它正在使用 * 选择器中的 16px。

当我使用

#newsletter p{
font-size: 14px;
}

那行得通，我知道它使用它是因为它是一个更具体的选择器，但是为什么它不选择设置为 #newsletter 选择器的 14px，它在 CSS 中更靠后，所以它应该优先考虑，不是吗工作，因为 * 选择器由于某种原因优先，或者在 div 上设置字体大小不起作用，它是否必须在 #newsletter p 选择器上。

4

3 回答 3

2

当您p在另一个元素（本例中为 with 的元素）中有任何元素（在本例中）时，内部元素id=newsletter的样式始终基于其自己的 CSS 属性。font-size在这种情况下，分配给内部元素的唯一规则是*{ font-size: 16px; }使其生效。您在外部元素上设置的任何内容都不会影响这一点。

这是 CSS级联的一部分。

如果要为元素id=newsletter及其所有后代（内部元素）设置固定字体大小，可以设置

#newsletter, #newsletter * { font-size: 14px }

更结构化的方法是

body { font-size: 16px }
#newsletter { font-size: 14px }

如果您不以其他方式设置字体大小，则元素将从body带有 的元素继承或继承id=newsletter，具体取决于它们的位置。

一种更好的方法，具有相同的基本逻辑，但字体大小会自动调整到浏览器设置（用户首选项）是

body { font-size: 100%; } /* logically not needed, helps against some bugs though */
#newsletter { font-size: 0.875em; } /* 14/16, giving 14px for body font size 16px */
于 2013-09-10T09:25:30.063 回答
2

尝试

 #newsletter *{
   font-size: 14px;
 }

您可能希望将字体大小应用于新闻通讯的所有子项

于 2013-09-10T08:59:03.660 回答
0

或者，使用正文而不是 *。这将在没有特异性问题的情况下实现相同的目标。

body {
   font-size: 16px;      
}

#newsletter {
   font-size: 14px;
}
于 2013-09-10T09:08:37.467 回答