Question

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

getDefaultPayload

Answer 1

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

.pagination li a.active应该更改为 .pagination li.active a
.pagination li a:hover:not(.active)应更改为.pagination li:hover:not(.active) a。

请参阅下面的工作示例

＆＃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;

Answer 2

使用＆＃34;！important＆＃34;每次覆盖css声明后！例如：

.pagination li {display: inline !important;}

无法更改Bootstrap分页颜色

2 个答案: