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

卢卡·格丁尼奇

我在使用有关边框的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- 0。这种方式与我认为CSS的工作方式相反。

如果我应用class =“ border-0 border-primary border-bottom” .border-0覆盖.border-bottom,而.border-primary则将颜色设置为primary,这意味着没有意义,因为由于.border而没有边框-0。为什么这一切会发生?是CSS物件,Bootstrap 4.0.0物件还是其他物件?请帮忙

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

现场演示

齐姆

这在“为什么在Bootstrap中边框类的color属性上有重要的覆盖?”中得到了基本解答

如您在文档中所见,边框是加法和减法的这些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删除现有边框。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章