Изменение цвета разбиения на страницы Bootstrap

Вот мой контроль подкачки:

Я пытаюсь сделать ярлыки фиолетового разбиения на страницы, до сих пор я не мог его переопределить. Вот мой 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 */

Все ярлыки (активные) по-прежнему остаются синими. Как я могу переопределить его? Благодарю.

Ответ 1

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

Ответ 2

Это правила выбора и стиля в Boootstrap 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'

0 0 1 0 для класса .pagination, 0 0 1 0 для псевдо класса :hover и 0 0 0 1 для элемента a.

Значения специфичности бутстрапа:

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

0 0 1 0 для класса .pagination, 0 0 1 0 для псевдокласса :focus и 0 0 0 1 для каждого элемента, a и li.

Вот что вы можете сделать:

Измените значение в источнике, измените значение #eee на фиолетовый.
Переопределите селектор. Убедитесь, что он имеет ту же или большую специфичность, что и исходный селектор. Примечание: если вы используете ту же специфику, что и исходный селектор, убедитесь, что он появился после исходного селектора в вашем документе.

Опция 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. Проверьте этот удобный калькулятор специфичности.

Ответ 3

Важный атрибут css:

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

Ответ 4

Это не так сложно, как только вы получите все нужные классы. До тех пор, пока ваш 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;
}

Это результат.

Ответ 5

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