html - 规则集中字体和行高的顺序

Question

我认为规则集中 CSS 的顺序并不重要，只要没有隐含的重复规则(例如 border 和 border-top ).

事实上，许多 CSS 样式指南推荐任意顺序，例如“按组”或“按字母顺序”。

但是，规则集中font 和line-height 的顺序会产生很大的不同:

div {border: 1px solid gray; float: left;}
#D1 {font: 20px arial; line-height: 3;}
#D2 {line-height: 3; font: 20px arial;}

<div id="D1">This is a test</div>
<div id="D2">This is a test</div>

无单位的行高应该是字体大小的倍数。

但为什么 font 规则必须在 line-height 规则之前才能发生这种情况？

Answer 1

尽管名称如此，line-height 实际上是 font shorthand 的一部分.简写声明将 line-height 设置为其初始值 normal，它会覆盖您之前的 line-height 声明。

为此，您可以将 line-height 合并到速记中，如下所示添加一个 #D3 元素:

div {border: 1px solid gray; float: left;}
#D1 {font: 20px arial; line-height: 3;}
#D2 {line-height: 3; font: 20px arial;}
#D3 {font: 20px/3 arial;}

<div id="D1">This is a test</div>
<div id="D2">This is a test</div>
<div id="D3">This is a test</div>