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

Question

我并不认为规则集中CSS的顺序很重要，只要没有隐式重复规则（例如border和border-top）。

事实上，许多CSS样式指南推荐一个任意的顺序，如＆＃34;按组＆＃34;或＆＃34;按字母顺序排列。＆＃34;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

但为什么font规则必须先于line-height规则才会发生这种情况？

Answer 1

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

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

＆＃13;

＆＃13;

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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;