为什么这个CSS类样式依赖于顺序？

Question

.container {
   border: 4px solid;
}

和另一堂课

.border-red {
   border-color:red;
}

和我的HTML

<div class="container border-red"> </div>

边框颜色不适用于元素,除非我.border-red之前放过该类 .container

请检查演示JSFIddle

Answer 1

原因是这个

.container {
   border: 4px solid;
}

实际上是简写

.container {
   border-width: 4px;
   border-style: solid;
   border-color: ** current font color **;
}

因此,后一种样式会覆盖先前的border-color声明.

Border @ MDN