为什么这个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

Answer 2

它依赖于顺序，因为border:是border-style: + border-width: + border-color:的缩写。

Answer 3

这是因为.container类会覆盖.border-red类中定义的边框颜色

不使用!important我会改变

.container {
   border-width: 4px;
   border-style: solid;
}

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

Answer 4

border属性是一次设置（和覆盖）三个属性的快捷方式：

• border-width（默认值medium）
• border-style（默认值none）
• border-color（默认值是元素颜色属性的值）

在border之后声明border-color会覆盖这三个属性，即使您没有明确指定所有三个值。

解决方案是破坏您的规则并仅列出您要更改的属性。无论规则的顺序如何，这都有效：

.border-red {
    border-color:red;
}
.container {
    border-style: solid;
    border-width: 4px ;
}