关于CSS分页栏

结果如下图：

 

效果：

鼠标划过时，边框和字体都变红；处于当前页时，页码样式与其它页不同，​数字加粗，光标变为文本线。

知识点:

考虑css样式的覆盖

先给所有的标签设定样式

a{

background::#fff;

border:1px solid #cdcdcd;

padding:0px 9px 0px 9px;

height:20px;

line-height::20px;

color:#333333;

display:inline-block;

}

鼠标划过的样式，使用伪类hover

a:hover{

border-color:red;

color:red;

}

​处于当前页时，数字加粗，背景颜色与其它不同，光标为文本线

.active{

font-weight:bold;

banckground:#fcf9ea;

cursor:text;

}

鼠标划过当前页时，给当前页添加一个样式，​将颜色设置为最初的样式

.active:hover{

border-color:#cdcdcd;

color:#333333;

}

在浏览器中看上去当前页没有其它页鼠标划过的样式，不代表没有，只不过将颜色修改了，在给所有的标签设置同样的样式之后，再给当前页重新设置，则原来的样式就会被覆盖，因为当前页样式的优先级较高。