Thay đổi pagination màu Bootstrap

Question

Dưới đây là kiểm soát pagination của tôi:

Tôi cố gắng để làm cho các nhãn của pagination tím, cho đến nay tôi đã không thể ghi đè lên nó. Đây là CSS của tôi:

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

Tất cả các nhãn (hoạt động) vẫn là màu xanh dương. Làm thế nào tôi có thể ghi đè lên nó? Cảm ơn.

Answer 1

.example .pagination>li>a, 
 
.example .pagination>li>span { 
 
    border: 1px solid purple; 
 
} 
 
.pagination>li.active>a { 
 
    background: purple; 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="example"> 
 
    <nav> 
 
     <ul class="pagination"> 
 
     <li class="disabled"> 
 
      <a href="#" aria-label="Previous"> 
 
      <span aria-hidden="true">«</span> 
 
      </a> 
 
     </li> 
 
     <li class="active"><a href="#">1</a> 
 
     </li> 
 
     <li><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="#" aria-label="Next"> 
 
      <span aria-hidden="true">»</span> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

Nó có thể không được làm việc do đặc vấn đề này, hãy thử thêm một số lớp cha mẹ, hay phong cách nó sử dụng ID cho rằng pagination UL, như tôi đã cho cha mẹ <div class="example">

Read more about Specificity here

Answer 2

Đây là quy tắc chọn và kiểu trong Boootstrap 3.3.5 điều khiển nền màu của phần tử phân trang:

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

Bộ chọn của bạn không đủ cụ thể. Giá trị cụ thể của chúng là 0 0 2 1 và bộ chọn Bootstrap là 0 0 2 2.

Giá trị đặc hiệu của bạn:

.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 cho lớp .pagination, 0 0 1 0 cho một lớp giả :hover và 0 0 0 1 cho các phần tử a.

Bootstrap đặc Values:

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

0 0 1 0 cho lớp .pagination, 0 0 1 0 cho một lớp giả :focus và 0 0 0 1 cho mỗi phần tử, a và li.

Đây là những gì bạn có thể làm:

1. Thay đổi giá trị tại nguồn, thay đổi #eee đến tím.
2. Ghi đè bộ chọn. Đảm bảo rằng nó có độ đặc hiệu giống nhau hoặc lớn hơn bộ chọn gốc. Lưu ý: nếu sử dụng cùng một độ đặc hiệu như bộ chọn gốc đảm bảo nó đến sau bộ chọn gốc trong tài liệu của bạn.

Lựa chọn # 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; 
} 

Lựa chọn # 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; 
} 

Lý tưởng nhất là bạn muốn tăng độ đặc hiệu với số lượng nhỏ nếu bạn có thể và né tránh bằng cách sử dụng tùy chọn ID . Kiểm tra này Specificity Calculator tiện dụng.

Answer 3

thuộc tính css quan trọng như thế này:

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