Question

假设以下HTML：

<li>
    <a href="#">Link</a>
</li>

哪种CSS样式设置字体大小是正确的？

li {
   font-size: 12px;
}

li a {
   font-size: 12px;
}

Answer 1

对于您的简化示例，任何一个都可以。第一个会影响所有列表项，而第二个只会影响列表项中的链接 。哪一个适当取决于您是否/如何在代码中的其他位置使用列表项。

Answer 2

许多CSS样式从父级继承到其子级，包括font-size。如果您将此层次结构想象为树，则一般规则是将样式应用为尽可能高（父），但尽可能低（子项）。样式也应该尽可能一般（意味着选择器数量较少）。

在你的情况下，这意味着如果你只想选择'a'in inside'li'，你应该使用第二条规则。如果您希望所有'li'的字体大小为12px，您可以将样式应用于li或ul, ol甚至是正文或外部容器。