Question

我是bootstrap的新手。我脑海中浮现出这个问题。由于我们可以为特定元素使用多个类，如果我们使用的两个类具有相同的属性会发生什么？我试过用这样的东西：

<div class = "pull-left pull-right">
    <p> Test </p>
</div>

和

<div class = "pull-right pull-left">
    <p> Test </p>
</div>

在这两种情况下，我的div都被拉了下来。 bootstrap如何优先排序？

Answer 1

Bootstrap本身没有优先考虑这些事情，因为它只是一个“框架”，基本上只是一个预定义的CSS代码。您的示例中的混淆源于Bootstrap在其文件中定义“pull-right”后定义“pull-left”的事实。如果你打开源代码，你会发现：

.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}

现在，因为它们都是!important并且在左右和之后定义了左下角这两个类都应用于你的元素，所以后来声明的那个类当然支配了浮动规则。如果您要切换它们，将.pull-right放在.pull-left之后，您将使两个元素向右浮动。

此外，值得一提的是还有特异性优先排序。粗略地说，更精确定义的类将覆盖被定义为更抽象的类。