css - 覆盖悬停和焦点样式的聪明方法

Question

我正在覆盖 Bootstrap 分页，这样就没有背景/边框了，尽管为了让它工作，我还是写了很多重复的代码

.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
    }

我不想在标记中添加 !important 或额外的类，但是我还缺少其他方法吗？

这是我在必须使用 !important 时所能做的最好的

.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;
    }

简单示例:http://codepen.io/anon/pen/FpCEA

Answer 1

编辑: 我刚刚看到您不想要任何额外的类(class)，但恐怕您没有任何其他方法可以在不使用 !important 的情况下缩短您的 CSS >。您仍然可以改用 LESS/SASS，这是很好的选择。

---

您可以指定您的 .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>

那么你就不必使用 !important :

.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
}

Codepen fork