CSSリセットとフォントファミリ

Question

html, body, h1, h2, h3, h4, p, div, ul, ol, li { 
padding: 0; 
border: 0; 
margin: 0; 
font: inherit; 
font-size: 100%; 
font-family: "Helvetica Neue", Helvetica, sans-serif; 
} 

「font：family」プロパティを「font：inherit」より上に移動すると、「font-family」プロパティが機能しない理由を知っていますか？

Answer 1

fontは、font-familyを含む略語です。

同じルールセットで同じプロパティを2回設定すると、最後のルールセットが優先されます。

は説明するために：

div { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 20px; 
 
    padding: 5px; 
 
    margin: 5px 
 
} 
 
.A { 
 
    border: solid red 1px; 
 
    border-left: dotted blue 2px; 
 
} 
 
.B { 
 
    border-left: dotted blue 2px; 
 
    border: solid red 1px; 
 
}

<div class="A"></div> 
 
<div class="B"></div>