0

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

.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

4

1 回答 1

1

编辑：我刚刚看到你不想要任何额外的课程，但恐怕你没有任何其他方法可以在不使用!important. 您仍然可以使用 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 分叉

于 2013-09-20T07:35:07.230 回答