laravel自定义分页覆盖不适用于活动类

Question

我为laravel分页写了自定义css。一切都很好，除了活动类。我想将类的活动背景颜色更改为橙​​色。

这是我的css

.div_blogspage_pag>ul>li>a{
    color: #cc6633;
    border-color: #cc6633;
}
.active:active{
    background-color: #cc6633; !important;
}
.div_blogspage_pag>ul>li.active>a,.div_blogspage_pag>ul>li.active>a:hover{
    background-color: #cc6633;
    color: white;
    border-color: #cc6633;
}
.div_blogspage_pag>ul>li:hover>a{
    color: white;
    border-color: #cc6633;
    background-color: #cc6633;
}

laravel blade

<div class="div_blogspage_pag">
    {{$articles->links()}}
</div>

除了活动类

之外，输出一切正常

enter image description here

Answer 1

你可以尝试一下。

.pagination>li>a, .pagination>li>span {
    color: #6db91c;
    border: 1px solid #000;
}

.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    color: #fff;
    background-color: #6db91c;
    border-color: #6db91c
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    background-color: #6db91c;
    border-color: #6db91c
}

.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
    color: #000; background-color: #fff; border-color: #000; cursor: not-allowed
}