为什么 .border-0 在 Bootstrap 4.0.0 中会覆盖 .border-bottom

Question

我在使用 Bootstrap 4.0.0 实用程序类时遇到了问题。

确切地说，在元素上应用 class="border-primary border-bottom" 时，我遇到了一些（在我看来）奇怪的行为。 当我在 Chrome 中查看 DevTools 时，我看到以下输出：

.border-primary { // This overrides color assigned from .border-bottom
    border-color: #007bff!important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6!important;
}

.border-primary 就像它的颜色声明覆盖了 .border-bottom 颜色声明一样... 为什么在类 .border-bottom 之前设置类 .border-primary 时会发生这种情况？后一个不应该覆盖前一个吗？ 它们都具有 !important 标签和相同的特异性（据我所知）。唯一闻起来很有趣的是我们设置的方式 .border-primary 的边框颜色，它似乎比 .border-bottom 类更明确。

在元素上应用 class="border-0 border-bottom" 时也会出现类似的边框问题。

在咨询 DevTools 时，它看起来像这样：

.border-0 {
    border: 0!important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6!important; // This is clearly overridden by border-0
}

基本上，不是用 .border-0 拒绝所有边框，然后通过 .border-bottom 在底部应用边框，.border-0 似乎覆盖了所有和 尽管在 .border-0 之后应用了 .border-bottom ，但删除所有边框。这与我认为 CSS 的工作方式背道而驰。

如果我应用 class="border-0 border-primary border-bottom" .border-0 覆盖 .border-bottom，并且 .border-primary 将颜色设置为主要颜色，这意味着什么，因为没有边框，因为的 .border-0。为什么会发生这一切？它是 CSS 的东西，Bootstrap 4.0.0 的东西，还是其他东西？请帮忙

我在下面附上一个 JSFiddle 示例。

Live demo

Answer 1

这个基本在Why is there an important override on the border classes's color property in Bootstrap?回答

正如您在文档中看到的那样，borders are additive and subtractive。 border--*-0 类旨在从已经具有边框的元素（例如卡片）中移除边框，无论是所有边还是特定边。

其他border-* 类用于添加边框。

因此，在border-0 border-bottom 的情况下，是的border-0 按预期从所有边移除边框。在您的示例中，使用 border-0 没有意义，因为 box 没有开始的边框。

如果您只想在已经有边框的元素上显示border-bottom border-primary（即：card），您可以使用：border-primary border-left-0 border-right-0 border-top-0...border-primary 来更改现有的边框颜色，并且border-left-0 border-right-0 border-top-0 删除现有边框。