下面是我的分页控件:
我试图使分页的标签为紫色,到目前为止我还无法覆盖它。下面是我的CSS:
/* 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 */
所有标签(活动)仍为蓝色。我怎么能覆盖它?谢谢.
9条答案
按热度按时间cmssoen21#
qvtsj1bj2#
由于specificity问题,它可能无法工作,请尝试添加一些父类,或者使用该分页UL的ID对其进行样式化,就像我给出的父类
<div class="example">
一样Read more about Specificity here
gg0vcinb3#
这是Bootstrap 3.3.5中的选择器和样式规则,用于控制分页元素的背景颜色:
你的选择器不够具体。它们的特异性值是
0 0 2 1
,Bootstrap选择器是0 0 2 2
。您的特异性值:
0 0 1 0
表示类.pagination
,0 0 1 0
表示伪类:hover
,0 0 0 1
表示元素a
。Bootstrap特异性值:
0 0 1 0
用于类.pagination
,0 0 1 0
用于伪类:focus
,0 0 0 1
用于每个元素,a
和li
。以下是您可以执行的操作:
1.更改源处的值,将
#eee
更改为紫色。1.覆盖选择器。确保它具有与原始选择器相同或更高的特异性。**注意:**如果使用与原始选择器相同的特异性,请确保它在文档中位于原始选择器之后。
选项1
选项2
理想情况下,如果可以的话,您希望少量增加特异性,并避免使用ID选项。看看这个方便的Specificity Calculator。
pes8fvy94#
这不是太难,一旦你得到了所有正确的类。只要你的CSS在引导CSS之后,这就可以解决一切问题。
我用的是bootstrap 3.3.5。
我的默认设置如下所示:
我应用下面的CSS为所有元素(包括活动页面)着色。根据需要复制和更改颜色:
这就是结果。
unftdfkk5#
只需将此SASS变量更改为您的颜色:
7xllpg7q6#
对于Bootstrap 4 4.5:
(In这个例子在CSS中的黑暗主题,但当然你可以改变颜色)
bvk5enib7#
重要的CSS属性如下:
gc0ot86w8#
CSS:在活动样式更改下方添加以覆盖现有行为。
HTML:如何将其作为类应用
41zrol4v9#
对于Bootstrap 5:
来自bootstrap docs:https://getbootstrap.com/docs/5.3/components/pagination/