可以为某些元素覆盖Bootstrap CSS但不能覆盖其他元素吗？

Question

我已将以下元素应用于Bootstrap btn和default-btn类：

<input class="btn btn-default add-to-cart-btn" type="submit" name="addcart" value="Add to Cart" />

<div class="btn btn-default enquire-btn" >Enquire</div>

我的CSS选择器如下所示：

.add-to-cart-btn, .enquire-btn {
//CSS
}

但是，只有add-to-cart-btn CSS会占用Bootstrap CSS。

有人知道为什么会这样或者为什么Bootstrap在div上覆盖样式有问题？

Answer 1

您的CSS必须比您尝试重载的CSS更具体。 你正在做.add-to-cart-btn，.enquire-btn。 所以bootstrap可能正在做＆＃34; div.enquire-btn＆＃34;。这比CSS更具体。 为了超载div.enquire-btn。

Answer 2

我会尝试制作两个不同的课程。

.add-to-cart-btn {...}

.enquire-btn {...}

Answer 3

您的第一个问题是，对于您输入的课程，您已经拼写了＆＃34; btn-default＆＃34;不正确。因此，该类的bootstrap.css没有被使用，这就是为什么你的自定义代码适用于那个而不是另一个。

如果没有看到文档的其余部分，我只能假设您的自定义css在引导样式表之前被加载，这就是接收首选项的原因。通过向他们添加btn类，尝试使您的自定义选择器更具体。

例如

.btn.add-to-cart-btn, .btn.enquire-btn {
  //CSS
}

Answer 4

这很奇怪。但我会尝试这样做，看它是否有效。

input.add-to-cart-btn, div.enquire-btn {
  /* Your Style Here */
}