Question

这可能有点愚蠢，但我在div中的文本字体大小有问题。

在我的CSS中我使用了

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

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

当我使用

时

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

这有用，我知道它使用它，因为它是一个更具体的选择器，但为什么它不会将＃14sx集合提取到#newsletter选择器，它在CSS中更进一步，所以它应该优先考虑，它不起作用，因为*选择器由于某种原因获得优先权，或者在div上设置font-size不起作用，它是否必须在#newsletter p选择器上。

Answer 1

尝试

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

您可能希望将font-size应用于简报的所有子项

Answer 2

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

这是CSS cascade的一部分。

如果要为具有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 */

Answer 3

或者，使用body而不是*。没有特殊性问题，这将实现同样的目标。

body {
   font-size: 16px;      
}

#newsletter {
   font-size: 14px;
}

将字体大小应用于*标签的div和选择器优先级

3 个答案: