Cambiare colore impaginazione Bootstrap

Question

Ecco il mio controllo impaginazione:

Sto cercando di rendere le etichette del impaginazione viola, finora sono stato in grado di ignorarlo. Ecco il mio 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 */ 

Tutte le etichette (attive) sono ancora blu. Come posso ignorarlo? Grazie.

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

Si potrebbe non funzionare a causa di specificità problemi, prova ad aggiungere qualche classe genitore, o lo stile utilizzando ID per quella impaginazione UL, come ho dato un genitore <div class="example">

Read more about Specificity here

Answer 2

Questo è il selettore e le regole di stile in Boootstrap 3.3.5 che controlla lo sfondo colore di un elemento di impaginazione:

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

I selettori non sono sufficientemente specifici. Il loro valore di specificità è 0 0 2 1 ei selettori Bootstrap sono 0 0 2 2.

vostri valori specificità:

.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 per la classe .pagination, 0 0 1 0 per una classe pseudo :hover e 0 0 0 1 per l'elemento a.

Bootstrap specificità Valori:

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

0 0 1 0 per la classe .pagination, 0 0 1 0 per una classe pseudo :focus e 0 0 0 1 per ciascun elemento, a e li.

Ecco cosa si può fare:

1. Modificare il valore alla fonte, cambiare #eee al viola.
2. Ignora il selettore. Assicurati che abbia la stessa o maggiore specificità del selettore originale. Nota: se si utilizza la stessa specificità del selettore originale, assicurarsi che venga dopo il il selettore originale nel documento.

Opzione # 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; 
} 

Opzione # 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; 
} 

Idealmente si vuole aumentare la specificità in piccole quantità, se è possibile e rifuggire da utilizzando l'opzione ID . Dai un'occhiata a questo pratico Specificity Calculator.

Answer 3

importante attributo css come questo:

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