为什么这个CSS类的样式与顺序有关？

还有一节课

.container {
   border: 4px solid;
}

还有我的html

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

边框颜色不适用于元素，除非我将

.border red

类放在前面

.container

---

请检查演示

原因是

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

实际上是

.container {
   border: 4px solid;
}

因此，后面的样式将覆盖前面的边框颜色声明

---

它是顺序相关的，因为

边框：

是

边框样式的简写：

+

边框宽度：

+

边框颜色：

这是因为

.container

类重写了

中定义的边框颜色

不使用
！重要信息
我想这样做

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

border属性是一种快捷方式，可同时设置（并覆盖）三个属性：


边框宽度
（默认值
中等
）
边框样式
（默认值
无
）
边框颜色
（默认值是元素颜色属性的值）

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

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

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

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

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