Css Laravel分页活动页面显示时不带样式

我正在使用带有->render（）或->links（）方法的Laravel分页。一切都很好，唯一的问题是我当前的活动页面，不管是第一页、第二页还是最后一页，如果是活动页面，样式就不能正常工作。这是我的问题的一个例子

在搜索我的问题的解决方案时，我可以看到所选页码已添加，并且添加了“活动”类。搜索我的css文件（来自coreui免费模板）

我发现了以下样式：

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
    color: #fff;
    background-color: #20a8d8;
    border-color: #20a8d8; 
}

以下是

render（）

函数的HTML输出：

<ul class="pagination">
    <li><a href="http://localhost:8000/productos?page=1" rel="prev">&laquo;</a></li>
    <li><a href="http://localhost:8000/productos?page=1">1</a></li>
    <li class="active"><span>2</span></li>
    <li><a href="http://localhost:8000/productos?page=3">3</a></li>
    <li><a href="http://localhost:8000/productos?page=3" rel="next">&raquo;</a></li>
</ul>

2

---

有什么问题吗？

通过使用css文件和@fubar注释，我找到了解决方案。我所做的是：

我改变这一点：

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
   color: #fff;
   background-color: #20a8d8;
   border-color: #20a8d8; 
}

为此：

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
**.pagination li.active span,** --Added line
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
   color: #fff;
   background-color: #20a8d8;
   border-color: #20a8d8; 
}

我添加了这种风格：

.page-link, .pagination-datatables li a, .pagination li a, .pagination span {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #20a8d8;
    background-color: #fff;
    border: 1px solid #ddd; }

---

我也有同样的问题。但我已经用自己的样式将自定义CSS添加到样式锚定标记中。原来我的CSS干扰了它，所以，我评论了我所有的锚标记样式，它成功了！。 所以，（在我的例子中）解决方案是，不要使用标记名在CSS中编写任何样式，而是使用ID或类来实现这一目的。 要在导航栏中定位所需的锚定标记，我现在执行以下操作：

#mynav a {
   color: white;
   text-decoration: none;
   font-size: 1.3rem;
   font-weight: bold;
}

---

这样它就不会干扰页面上的任何其他锚定标记。

请发布分页HTML标记。@fubar我添加的htmlI实际上是指通过

render（）

方法输出的HTML。其他标记不相关。@fubar就绪，我添加了渲染输出。问题是您发布的CSS实际上没有针对活动分页项-

.pagination li.active span

。