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

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速记的一部分.速记声明设置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>