为何为HTML中div设置font-family不生效？CSS原理解析

核心原因在于CSS样式的直接应用与继承优先级差异，以及你使用的全局选择器的特性：

1. 全局*选择器的作用 #

你用*选择器给所有HTML元素直接设置了font-family，这意味着页面里的每个元素（包括#login-modal下的h2、label、input等）都自带了这条字体规则，属于直接应用的样式。

2. 继承样式的优先级低于直接样式 #

font-family是可继承属性，但如果子元素自身已经有直接设置的该属性，继承自父元素的样式会被完全覆盖。你给#login-modal设置字体，只是让这个div本身的字体改变，但它的子元素并不会继承这个字体——因为这些子元素已经被*选择器直接赋予了字体规则，直接样式的优先级远高于继承来的样式。

3. 选择器优先级在这里的误区 #

你可能以为#login-modal（ID选择器，优先级0,1,0,0）比*（通配符选择器，优先级0,0,0,0）优先级高，但这个优先级对比只在同一元素的样式冲突时生效。这里#login-modal的样式是给父元素的，子元素的字体样式是自己的*规则，两者作用在不同元素上，优先级对比不适用。

解决方法 #

方法一：简化子元素选择器 #

不用逐个列子元素，用#login-modal *选择器给该div下的所有子元素直接设置字体：

#login-modal * {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

方法二：修改全局样式（推荐） #

把全局字体设置从*改成body，这样字体是通过继承传递给子元素的，之后给#login-modal设置字体就能让其子元素继承：

body {
    font-family: 'Permanent Marker', cursive;
    margin: 0;
    padding: 0;
}

#login-modal {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

方法三：使用!important（不推荐） #

强行覆盖子元素的直接样式，但会破坏CSS优先级体系，后期维护容易出问题：

#login-modal {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

内容的提问来源于stack exchange，提问作者le lapplefrog