css - 分页按钮不显示禁用的 css

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 规则将获胜。