无法更改Bootstrap分页颜色

时间:2016-09-14 19:00:54

标签: html css pagination

我想改变引导分页颜色,但我不能以任何方式,无论我做什么都是蓝色。我想要将.pagination li a.active更改为red,将.pagination li a更改为black。我做错了什么?

getDefaultPayload

2 个答案:

答案 0 :(得分:4)

您的<a>课程没有active个标签,因此您需要更改两件事

  1. .pagination li a.active应该更改为 .pagination li.active a
  2. .pagination li a:hover:not(.active)应更改为.pagination li:hover:not(.active) a
  3. 请参阅下面的工作示例

    &#13;
    &#13;
    <link rel="stylesheet" href="http://path/to/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    
    .pagination ul {
      display: inline-block;
      padding: 0;
      margin: 0;
    }
    
    .pagination li {
      display: inline;
    }
    
    .pagination li a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
    }
    
    .pagination li.active a {
      background-color: red;
      color: white;
    }
    
    .pagination li:hover:not(.active) a {
      background-color: #ddd;
    }
    &#13;
    <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>
    
    
    <div class="container text-center">
      <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li class="active"><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="#">»</a></li>
      </ul>
    </div>
    <div>*emphasized text*</div>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

使用&#34;!important&#34;每次覆盖css声明后! 例如:

.pagination li {display: inline !important;}