Css 覆盖悬停和焦点样式的智能方法

我正在覆盖引导分页，这样就没有背景/边框，尽管为了让它正常工作，我自己编写了大量重复的代码

.pagination > li > a, 
.pagination > li > a:hover, 
.pagination > li > a:focus, 
.pagination > li > span,
.pagination > li > span:hover,
.pagination > li > span:focus {
    background: none;
    border: none;
    color: #a8a9ab
}
    .pagination > li > a:hover,
    .pagination > li > a:focus,
    .pagination > li.active > a, 
    .pagination > li.active > a:hover,
    .pagination > li.active > a:focus,
    .pagination > li.active > span,
    .pagination > li.active > span:hover,
    .pagination > li.active > span:focus {
        background: none;
        border: none;
        color: #000
    }

我不想添加

！重要信息

或将额外的类添加到标记中，但我是否缺少其他方法

这是我能做的最好的，当我不得不使用！重要的

.pagination > li > a,
.pagination > li > span {
    background: none !important;
    border: none !important;
    color: #a8a9ab !important;
}
    .pagination > li > a:hover,
    .pagination > li > a:focus,
    .pagination > li > span:hover,
    .pagination > li > span:focus,
    .pagination > li.active > a,
    .pagination > li.active > span {
        color: #000 !important;
    }

---

简单的例子：

编辑：我刚才看到你不想要任何额外的类，但我恐怕你没有任何其他方法来缩短你的CSS而不使用

！重要信息

。您仍然可以使用较少的/sas，这是很好的选择

---

您可以指定

.pagination

类，添加新类：

<ul class="pagination custom">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#" >3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
</ul>

将“分页”类更改为其他类并编写自己的简单css怎么样？：-）

.pagination.custom > li > a, 
.pagination.custom > li > span {
    background: none;
    border: none;
    color: #a8a9ab
}
.pagination.custom > li > a:hover, 
.pagination.custom > li > a:focus, 
.pagination.custom > li > span:hover,
.pagination.custom > li > span:focus,
.pagination.custom > li.active > a,
.pagination.custom > li.active > span {
    background: none;
    border: none;
    color: #000
}