更改Bootstrap分页颜色

Question

这是我的分页控件：

我想让分页标签的颜色变成紫色，但我一直无法覆盖它原来的颜色。以下是我的CSS代码：

/* pagination */

.pagination {
    height: 36px;
    margin: 18px 0;
    color: #6c58bF;
}

.pagination ul {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    margin-left: 0;
    color: #ffffff;
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination li {
    display: inline;
    color: #6c58bF;
}

.pagination a {
    float: left;
    padding: 0 14px;
    line-height: 34px;
    color: #6c58bF;
    text-decoration: none;
    border: 1px solid #ddd;
    border-left-width: 0;
}

.pagination a:hover,
.pagination .active a {
    background-color: #6c58bF;
    color: #ffffff;
}

.pagination a:focus {
    background-color: #6c58bF;
    color: #ffffff;
}


.pagination .active a {
    color: #ffffff;
    cursor: default;
}

.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
    color: #999999;
    background-color: transparent;
    cursor: default;
}

.pagination li:first-child a {
    border-left-width: 1px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

.pagination-centered {
    text-align: center;
}

.pagination-right {
    text-align: right;
}

.pager {
    margin-left: 0;
    margin-bottom: 18px;
    list-style: none;
    text-align: center;
    color: #6c58bF;
    *zoom: 1;
}

.pager:before,
.pager:after {
    display: table;
    content: "";
}

.pager:after {
    clear: both;
}

.pager li {
    display: inline;
    color: #6c58bF;
}

.pager a {
    display: inline-block;
    padding: 5px 14px;
    color: #6c58bF;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.pager a:hover {
    text-decoration: none;
    background-color: #f5f5f5;
}

.pager .next a {
    float: right;
}

.pager .previous a {
    float: left;
}

.pager .disabled a,
.pager .disabled a:hover {
    color: #999999;
}


/* end */

所有的标签（激活状态）仍然是蓝色的。我该如何覆盖它？谢谢。

- user3754111

Answer 1

.pagination > li > a
{
    background-color: white;
    color: #5A4181;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: #5A4181 !Important;
    border: solid 1px #5A4181 !Important;
}

.pagination > .active > a:hover
{
    background-color: #5A4181 !Important;
    border: solid 1px #5A4181;
}

- ddd

---

传说！！非常感谢 - AraByte

Answer 2

.example .pagination>li>a,
.example .pagination>li>span {
  border: 1px solid purple;
}
.pagination>li.active>a {
  background: purple;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="example">
    <nav>
      <ul class="pagination">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a>
        </li>
        <li><a href="#">2</a>
        </li>
        <li><a href="#">3</a>
        </li>
        <li><a href="#">4</a>
        </li>
        <li><a href="#">5</a>
        </li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

由于特异性问题，它可能无法正常工作，请尝试添加一些父类或使用ID为分页UL进行样式设置，就像我给出的父级<div class="example">一样。

在这里阅读有关特异性的更多信息

- Deepak Yadav

---

如果新规则的选择器具有相同的特异性，则将规则放置在文档中原始规则之后也可以起作用。 - hungerstar

1、2、3、4、5这些标签仍然是蓝色的，不是紫色的。 - user3754111

@user3754111，我只是举了一个例子，你需要类似地设计整个分页元素。 - Deepak Yadav

@user3754111，请查看这个链接，你可以更改颜色并使边角变圆。希望能对某些人有所帮助。 - Shaiju T

Answer 3

这并不困难，一旦你掌握了所有正确的类。只要在Bootstrap CSS之后编写您自己的CSS，就可以解决所有问题。

我正在使用Bootstrap 3.3.5。

我的默认设置如下： 我应用以下CSS来给所有元素（包括活动页面）上色。按需要复制和更改颜色：

.pagination > li > a
{
    background-color: white;
    color: purple;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: purple;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: purple;
    border: solid 1px purple;
}

.pagination > .active > a:hover
{
    background-color: purple;
    border: solid 1px purple;
}

这是结果。

- Steve Lautenschlager

---

你怎么获得酷炫的倒带（<<）和快进（>>）符号来实现按钮呢？它们只是简单的相邻的两个UTF-8字符吗？看起来很酷！ - skcin7

是的，它们只是两个UTF箭头。 - Steve Lautenschlager

Answer 4

这是Bootstrap 3.3.5中控制分页元素背景颜色的选择器和样式规则：

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

您的选择器不够具体。它们的特异性值为0 0 2 1，而Bootstrap选择器的特异性值为0 0 2 2。

您的特异性值：

.pagination a:hover = `0 0 2 1`
.pagination .active a = `0 0 2 1`
.pagination a:focus = `0 0 2 1`

在类 .pagination 上使用 0 0 1 0，在伪类 :hover 上使用 0 0 1 0，在元素 a 上使用 0 0 0 1。

Bootstrap 的特殊性值：

.pagination > li > a:focus = `0 0 2 2`

对于类 .pagination，使用 0 0 1 0 ，对于伪类:focus也使用 0 0 1 0，而对于每个元素 a 和 li 使用0 0 0 1。

以下是您可以做的：

1. 更改源代码中的值，将 #eee 更改为紫色。
2. 覆盖选择器。确保具有相同或更大的特异性比原始选择器。注意：如果使用与原始选择器相同的特异性，请确保它在文档中位于原始选择器之后。

选项＃1

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

选项 #2

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

/* ...a bunch of other CSS... */

/* Now do one of the following options */

/* SAME SPECIFICITY OPTION - 0 0 2 2, needs to come AFTER original rule */
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: purple;
}
/* GREATER SPECIFICITY - SMALL increase, 0 0 2 3 */
ul.pagination > li > a:focus,
ul.pagination > li > a:hover,
ul.pagination > li > span:focus,
ul.pagination > li > span:hover {
    background-color: purple;
}
/* GREATER SPECIFICITY - LARGE increase, 0 1 1 1 */    
#my-paginator a:focus,
#my-paginator a:hover,
#my-paginator span:focus,
#my-paginator span:hover {
    background-color: purple;
}

理想情况下，如果可以的话，应该逐渐增加特定性并避免使用ID选项。请查看这个方便的特定性计算器。

- hungerstar

---

在某些情况下，焦点上的活动颜色可能不是一个好主意。少两条规则。 - Roman Susi

@RomanSusi 我在答案中提供的所有解决方案都是基于Bootstrap的样式定义构建的，以增加特定性，使样式属性生效。 - hungerstar

Answer 5

只需用您的颜色更改此SASS变量：

$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-color: $gray-300 !default;

$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;

$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;

$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;

- Federico González Brizzio

Answer 6

对于Bootstrap 4.5：

（在此示例中，CSS采用深色主题，但您当然可以更改颜色）

   .page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #d9d9d9 !important;
    background-color: #4f4f4f !important;
    border: 1px solid #262626 !important;
}
.page-link:hover {
        z-index: 2;
        color: #fff !important;
        text-decoration: none;
        background-color: #a4a4a4 !important;
        border-color: #dee2e6;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #808080 !important;
    border-color: #353535;
}
 

- Leandro Bardelli

Answer 7

像这样的重要CSS属性：

.pagination > li > a, .pagination > li > span{
     color:black !Important;       
}

- Miroslav Siska

Answer 8

CSS：添加以下活动状态样式以覆盖现有行为。

.pager li .active{
      background-color: rgb(181, 181, 214);
      color: rgb(9, 9, 80);
}

HTML：如何将其应用为类

<li><a href='#' class='active'>1</a></li>

- JoharKhan

Answer 9

对于Bootstrap 5：

.pagination {
      --bs-pagination-color: #808080;
      --bs-pagination-hover-color: #6d6d6d;
      --bs-pagination-active-color: #fff;
      --bs-pagination-active-border-color: #33055b;
      --bs-pagination-active-bg: #502a71;
      --bs-pagination-hover-bg: #ffc0f7;
} 

从Bootstrap文档中：https://getbootstrap.com/docs/5.3/components/pagination/

- user1880531

---

很遗憾，这与sass变量的组合不起作用。 - undefined