Ändern Paginierung Farbe

Question

Bootstrap

Hier ist meine Paginierung Kontrolle:

Ich versuche, die Etiketten von der Paginierung lila zu machen, so weit ich nicht in der Lage gewesen, es zu überschreiben. Hier ist mein 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 */ 

Alle Etiketten (aktiv) sind immer noch blau. Wie kann ich es überschreiben? Vielen Dank.

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>

Es ist vielleicht nicht aufgrund Spezifität Probleme arbeiten, versuchen, einige Eltern-Klasse hinzufügen, oder es Stil ID mit einem für diese Paginierung UL, wie ich ein Elternteil <div class="example">

gegeben haben

Read more about Specificity here

Answer 2

Dies ist die Auswahl und Stil Regeln in Boootstrap 3.3.5, die den Hintergrund steuert Farbe eines Paginierungselements:

Ihre Selektoren sind nicht spezifisch genug. Ihr Spezifitätswert ist 0 0 2 1 und die Bootstrap-Selektoren sind 0 0 2 2.

Ihre Spezifität Werte:

.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 für die Klasse .pagination, 0 0 1 0 für eine Pseudo-Klasse :hover und 0 0 0 1 für das Element a.

Bootstrap Spezifitätswerte:

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

0 0 1 0 für die Klasse .pagination, 0 0 1 0 für eine Pseudoklasse :focus und 0 0 0 1für jedes Element, a und li.

Hier ist, was Sie tun können:

1. Ändern Sie den Wert an der Quelle, #eee bis violett ändern.
2. Setzen Sie den Selektor außer Kraft. Stellen Sie sicher, dass es dieselbe oder eine höhere Spezifität als der ursprüngliche Selektor aufweist. Hinweis: Wenn Sie dieselbe Spezifität wie die Originalauswahl verwenden, vergewissern Sie sich, dass nach der ursprüngliche Selektor in Ihrem Dokument angezeigt wird.

Option # 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

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

Idealer Spezifität in kleinen Mengen erhöhen, die Sie wollen, wenn Sie und weg von der Nutzung der ID Option scheuen können . Schauen Sie sich dieses handliche Specificity Calculator an.

Answer 3

Wichtige CSS-Attribut wie folgt aus:

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