बदलने पृष्ठांकन रंग

Question

बूटस्ट्रैप यहाँ मेरी पृष्ठांकन नियंत्रण है। यहां मेरा सीएसएस है:

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

सभी लेबल (सक्रिय) अभी भी नीले हैं। मैं इसे कैसे ओवरराइड कर सकता हूं? धन्यवाद।

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>

यह कारण विशिष्टता मुद्दों से काम नहीं कर रहा हो सकता है, कुछ माता पिता वर्ग जोड़ने का प्रयास करें या शैली यह है कि पृष्ठांकन यूएल के लिए आईडी का उपयोग कर, जैसे मैं एक माता पिता <div class="example">

दे दिया है

Read more about Specificity here

Answer 2

यह बूटस्ट्रैप 3.3.5 में चयनकर्ता और स्टाइल नियम है जो पृष्ठभूमि को नियंत्रित करता है एक अंकन तत्व का रंग:

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

आपके चयनकर्ता पर्याप्त विशिष्ट नहीं हैं। उनका विशिष्टता मान 0 0 2 1 है और बूटस्ट्रैप चयनकर्ता 0 0 2 2 है।

आपका विशिष्टता मान:

.pagination a:hover = `0 0 2 1` 
.pagination .active a = `0 0 2 1` 
.pagination a:focus = `0 0 2 1` 

वर्ग .pagination के लिए एक छद्म वर्ग :hover के लिए 0 0 1 0, 0 0 1 0 और तत्व a के लिए 0 0 0 1।

बूटस्ट्रैप विशिष्टता मान:

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

वर्ग .pagination के लिए एक छद्म वर्ग :focus के लिए 0 0 1 0, 0 0 1 0 और 0 0 0 1के लिए प्रत्येक तत्व, a और li।

यहाँ आप क्या कर सकते हैं:

1. बदलें स्रोत पर मूल्य, बैंगनी के लिए #eee बदल जाते हैं।
2. चयनकर्ता को ओवरराइड करें। सुनिश्चित करें कि मूल चयनकर्ता की तुलना में इसकी समान या अधिक विशिष्टता है। नोट: यदि मूल चयनकर्ता के समान विशिष्टता का उपयोग करना सुनिश्चित करता है तो आपके दस्तावेज़ में मूल चयनकर्ता के बाद आता है।

विकल्प # 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; 
} 

विकल्प # 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; 
} 

आदर्श रूप में आप थोड़ी मात्रा में विशिष्टता को बढ़ाने के लिए यदि आप और आईडी विकल्प का उपयोग करने से संकोच कर सकते हैं । इस आसान Specificity Calculator देखें। इस तरह

Answer 3

महत्वपूर्ण सीएसएस विशेषता:

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