bootstrap中的高亮頁面分頁

Question

我使用twitter bootstap顯示頁碼。這是我的代碼：

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

我想強調的頁碼 「3」。因此，一個創建CSS類contain-copies，並把這個代碼在它：

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

我預計得到的輸出將是這樣的：

但它不工作。我應該怎麼做？

謝謝。

Answer 1

試試這個

.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

嘗試：

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