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

编辑：我刚看到你不想要任何额外的课程，但我担心你没有任何其他方法可以在不使用!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

巧妙的方式来覆盖悬停和焦点样式

1 个答案: