CSS 更改分页颜色 Bootstrap

Changing pagination colour Bootstrap

提问by user3754111

Here is my pagination control:

这是我的分页控件：

I am trying to make the labels of the pagination purple, so far I have been unable to override it. Here is my CSS:

我正在尝试将分页的标签设为紫色，到目前为止我一直无法覆盖它。这是我的 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 */

All of the labels (active) are still blue. How can I override it? Thanks.

所有标签（活动）仍然是蓝色的。我怎样才能覆盖它？谢谢。

回答by ddd

.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;
}

回答by Deepak Yadav

.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>

It might not be working due to specificityissues, try adding some parent class, or style it using ID for that pagination UL, like I have given a parent <div class="example">

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

Read more about Specificity here

在此处阅读有关特异性的更多信息

回答by hungerstar

This is the selector and style rules in Boootstrap 3.3.5 that controls the background color of a pagination element:

这是 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;
}

Your selectors are not specific enough. Their specificity value is 0 0 2 1and the Bootstrap selectors is 0 0 2 2.

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

Your Specificity Values:

您的特异性值：

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

0 0 1 0for the class .pagination, 0 0 1 0for a pseudo class :hoverand 0 0 0 1for the element a.

0 0 1 0对于类.pagination，0 0 1 0对于伪类:hover和0 0 0 1元素a。

Bootstrap Specificity Values:

Bootstrap 特异性值：

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

0 0 1 0for the class .pagination, 0 0 1 0for a pseudo class :focusand 0 0 0 1for eachelement, aand li.

0 0 1 0为类.pagination，0 0 1 0对伪类:focus和0 0 0 1对于每个元件，a和li。

Here's what you can do:

您可以执行以下操作：

1. Change the value at the source, change #eeeto purple.
2. Override the selector. Make sure it has the same or greater specificity than the original selector. Note:if using the same specificity as the original selector make sure it comes afterthe original selector in your document.

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

Option #1

选项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;
}

Option #2

选项#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;
}

Ideally you want to increase specificity in small amounts if you can and shy away from using the ID option. Check out this handy Specificity Calculator.

理想情况下，如果可以，您希望少量增加特异性，并避免使用 ID 选项。看看这个方便的特异性计算器。

回答by Steve Lautenschlager

This is not too hard once you get all of the right classes. So long as your CSS comes after the bootstrap CSS, this takes care of everything.

一旦你获得了所有正确的课程，这并不太难。只要你的 CSS 出现在 bootstrap CSS 之后，这就会处理一切。

I'm using bootstrap 3.3.5.

我正在使用引导程序 3.3.5。

My default settings look like this:

我的默认设置如下所示：

I apply the following CSS to color all the elements including the active page. Copy and change colors as desired:

我应用以下 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;
}

This is the result.

这是结果。

回答by Miroslav Siska

Important css attribute like this:

像这样的重要 css 属性：

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