CSS样式 - 分页按钮样式

HTML

<div class="pagination">
    <span class="disabled" title="首页">首页</span>
    <span class="disabled" title="上一页">上一页</span>
    <span class="current">1</span><span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>下一页</span>
    <span>尾页</span>
</div>

CSS

/*样式一*/
.pagination{ text-align: center;font-size: 12px;padding: 10px 0;display:inline-block}
.pagination a,.pagination span{display: inline-block;padding: 0 10px;height: 28px;line-height: 28px;border: 1px solid #ddd;border-radius: 4px;text-decoration: none;color: #999;cursor: pointer;  margin-right:5px;}
.pagination a:hover:not(.disabled):not(.current),.pagination span:hover:not(.disabled):not(.current){color:#f04848}
.pagination a.disabled,.pagination span.disabled{color: #bfbfbf;background: #f5f5f5;cursor: no-drop;border: 1px solid #ddd;}
.pagination a.current,.pagination span.current{color: #fff;background: #f04848;border: 1px solid #f04848;}