为什么这个 CSS 类样式顺序取决于

Question

.container {
   border: 4px solid;
}

和另一个类

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

和我的网页

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

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

边框 @ 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-color之后声明border将覆盖这三个属性，即使未显式指定所有三个值也是如此。

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

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