Changement de couleur de pagination Bootstrap

Voici ma pagination de contrôle:

Changement de couleur de pagination Bootstrap

Je suis en train de faire les étiquettes de la pagination violet, jusqu'à présent, j'ai été incapable de le remplacer. Voici mon 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 */

Toutes les étiquettes (à l'actif) sont encore bleu. Comment puis-je le remplacer? Merci.

source d'informationauteur user3754111

  1. 5

    C'est le sélecteur et des règles de style dans Boootstrap 3.3.5 qui contrôle la couleur de fond d'une pagination de l'élément:

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

    Votre sélecteurs ne sont pas assez spécifiques. Leur spécificité valeur est 0 0 2 1 et le Bootstrap sélecteurs est 0 0 2 2.

    Votre Spécificité Des Valeurs:

    .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 pour la classe .pagination0 0 1 0 pour une pseudo classe :hover et 0 0 0 1 pour l'élément a.

    Bootstrap Des Valeurs De La Spécificité:

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

    0 0 1 0 pour la classe .pagination0 0 1 0 pour une pseudo classe :focus et 0 0 0 1 pour chaque élément, a et li.

    Voici ce que vous pouvez faire:

    1. Modifier la valeur à la source, modifier #eee violet.
    2. Remplacer le sélecteur. Assurez-vous qu'il a la même ou une plus grande spécificité que le sélecteur d'origine. Remarque: si vous utilisez la même spécificité que le sélecteur d'origine assurez-vous qu'il vient après le sélecteur d'origine dans votre document.

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

    Idéalement, vous voulez augmenter la spécificité en petites quantités si vous le pouvez et timide loin de l'aide de l'ID option. Découvrez cette pratique La Spécificité De La Calculatrice.

  2. 1

    Important attribut css comme ceci: 

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

    Ce n'est pas trop difficile une fois que vous obtenez toutes les bonnes classes. Tant que votre CSS vient après le bootstrap CSS, cela prend tout en charge.

    Je suis en utilisant bootstrap 3.3.5.

    Mes paramètres par défaut ressembler à ceci:

    Changement de couleur de pagination Bootstrap

    J'applique le code CSS suivant la couleur de tous les éléments, y compris la page active. Copier et de modifier les couleurs à votre convenance:

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

    C'est le résultat.

    Changement de couleur de pagination Bootstrap