使用 CSS 更改 Twitter Bootstrap 中按钮的背景颜色

Posted 2023-03-05

【中文标题】使用 CSS 更改 Twitter Bootstrap 中按钮的背景颜色

【英文标题】：Change background color of button in Twitter Bootstrap using CSS

【发布时间】：2013-09-12 00:23:28

【问题描述】：

我正在使用 Twitter Bootstrap 提供的以下 pagination 按钮样式：

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

这是它们目前的样子：

如何更改我的 CSS 样式以将这些按钮的背景颜色从绿色更改为其他颜色？

我尝试了这段 CSS 代码，但它没有改变按钮样式：

.next 
    background-color: #ecf0f1;
    color: #2d525d;

谢谢！

【参考方案1】：

你需要覆盖css代码：

.next a 
    background-color: #ecf0f1 !important;
    color: #2d525d !important;

编辑： color 和 background-color 样式用于 li 内的“a”元素。

【参考方案2】：

您还可以将 !important 添加到您的自定义 css

.next 
background-color: #ecf0f1 !important;
color: #2d525d;

【参考方案3】：

使用

!important

在你css之后但之前;

这几乎意味着忽略其他任何内容并使用 THIS !important

您将需要使用它来打破某些框架中的默认样式，它对于媒体查询也很有用。