6.1.2　颜色扩展

分页组件默认是没有颜色效果设置的，在大多数情况下，都要对它进行改造，以便该组件适应我们设计的页面风格。本节就来扩展一下它的颜色样式。先看一下具体效果，如图6-2所示。

图6-2　不同颜色的分页样式

要更改颜色首先要注意以下几个方面：

❑li元素的边框颜色

❑li元素内的链接文本颜色

❑li元素在active高亮时的背景色和文本颜色

❑li元素在disabled禁用时的背景色和文本颜色

知道了这几点，我们就可以开始设置一个红色（red）风格的分页样式了。首先red样式必须和.pagination样式一起使用才能生效。相对应的详细代码如下：

/* 所有li元素内的a链接和span边框和文本颜色设置 */
.pagination.red > li > a,
.pagination.red > li > span {
    color: #f00;
    border: 1px solid #f00;
}
 
/* a链接和span在鼠标移动或焦点时的背景色设置 */
.pagination.red > li > a:hover,
.pagination.red > li > span:hover,
.pagination.red > li > a:focus,
.pagination.red > li > span:focus {
    background-color: #fdd5d5;
}
 
/* active高亮时，设置文本颜色、背景色、边框颜色 */
.pagination.red > .active > a,
.pagination.red > .active > span,
.pagination.red > .active > a:hover,
.pagination.red > .active > span:hover,
.pagination.red > .active > a:focus,
.pagination.red > .active > span:focus {
    color: #ffffff;
    background-color: #f00;
    border-color: #f00;
}
 
/*disabled禁用时，设置文本颜色、背景色、边框颜色 */
.pagination.red > .disabled > span,
.pagination.red > .disabled > span:hover,
.pagination.red > .disabled > span:focus,
.pagination.red > .disabled > a,
.pagination.red > .disabled > a:hover,
.pagination.red > .disabled > a:focus {
    color: #fdd5d5;
    background-color: #ffffff;
    border-color: #f00;
}

这样，通过如下样式，就可以使用该样式了。同样的道理，也可以扩展出其他各种各样的颜色样式。

<ul class="pagination red">
...
</ul>