Seite im Bootstrap hervorheben Paginierung

Question

Ich benutze Twitter Bootstap für die Anzeige der Seitenzahl. Dies ist mein Code:

<nav aria-label="Page navigation"> 
    <ul class="pagination"> 
     <li> 
      <a href="#" aria-label="Previous"> 
       <span aria-hidden="true">&laquo;</span> 
      </a> 
     </li> 
     <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">2</a></li> 
     <li class="contain-copies"><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">&raquo;</span> 
      </a> 
     </li> 
    </ul> 
</nav> 

I Seite Nummer "3" hervorheben möchten. So erstellt eine die CSS-Klasse contain-copies und diesen Code setzt in ihm:

.contain-copies 
{ 
    background-color: yellow; 
} 

ich erwartete Ausgabe zu erhalten, die wie folgt aussieht:

Aber es funktioniert nicht. Wie soll ich das machen?

Vielen Dank.

Answer 1

Versuchen Sie, diese

.pagination>li.contain-copies >a{background-color:yellow } 

.pagination>li.contain-copies >a{ 
 
background-color:yellow ; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav aria-label="Page navigation"> 
 
    <ul class="pagination"> 
 
     <li> 
 
      <a href="#" aria-label="Previous"> 
 
       <span aria-hidden="true">&laquo;</span> 
 
      </a> 
 
     </li> 
 
     <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">2</a></li> 
 
     <li class="contain-copies"><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">&raquo;</span> 
 
      </a> 
 
     </li> 
 
    </ul> 
 
</nav>

Answer 2

Versuchen mit:

.contain-copies 
{ 
    background-color: yellow !important; 
}