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

Question

我在使用 Bootstrap 4.0.0 实用程序 classes 时遇到了关于边框的问题。

准确地说，我在对元素应用 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 颜色声明... 为什么在 class .border-primary 设置在 class .border-bottom 之前会发生这种情况？后一个不应该覆盖前一个吗？他们都有 !important 标签和相同的特异性（据我所知）。唯一闻起来好笑的是我们设置的方式 .border-primary 的边框颜色，它似乎比 .border-bottom class.

更明确一点

在元素上应用 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-bottom 在 .border-0 之后应用，但删除所有边框。这种反对我认为 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 删除现有边框。

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

Why does .border-0 override .border-bottom in Bootstrap 4.0.0

css

border

bootstrap-4