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-primary在类.border-bottom之前设置时，为什么会发生这种情况？后者不应该覆盖前一个吗？它们都具有！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-bottom在.border-0之后应用。这种反对我认为CSS工作的方式。

如果我应用class =“border-0 border-primary border-bottom”.border-0覆盖.border-bottom，而.border-primary将颜色设置为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 ... {{1更改现有边框颜色，border-primary删除现有边框。

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

1 个答案: