Question

出于某种原因，当它知道按钮应该被禁用时，它会显示.paginate_button的css，然后将.paginate_button_disabled的css划掉。有谁知道为什么？

.paginate_button_disabled {
    border: 1px solid #F3F3F3;
    color: #CCCCCC;
    margin-right: 2px;
    padding: 2px 5px;
    border: 0;       
}
.paginate_button:hover {
    border:1px solid #52bfea;
    color: #fff;
    background-color: #52bfea;
}
.paginate_active {
    padding: 2px 5px 2px 5px;
    margin-right: 2px;
    border: 1px solid #52bfea;
    font-weight: bold;
    background-color: #52bfea;
    color: #FFF;
}
.paginate_button {
    padding: 2px 5px 2px 5px;
    margin-right: 2px;
    color: #52BFEA;
    border: 1px solid #52BFEA;
}

Answer 1

假设您在不删除.paginate_button_disabled的情况下向元素添加.paginate_button，则需要重新排序css。

.paginate_button规则应首先出现：

.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;       
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}

CSS的工作方式，是它在文档中级联。因此，如果它们具有相同的特异性，则较低的CSS规则将获胜。

Answer 2

如果您只是将.paginate_button_disabled类添加到元素中，而不删除.paginate_button类，那么后者将覆盖禁用的规则，因为它在CSS文档中稍后定义 - 它们实际上是字面意思级联样式。

Answer 3

最好的解决方案是隐藏任何不必要的按钮。

使用以下内容：

.paginate_button_disabled {
    display: none;
}

在这种情况下，只有在需要时才会显示上一个，下一个，第一个和最后一个按钮。

分页按钮没有显示禁用的CSS

3 个答案: