>>4
#現在のページのみ円で囲む

それなら
.pagination{〜〜}.pagination a{〜〜}
では何も指定せず
.active{〜〜}でデザインを作っていくことになります。
というのも
> <li><span class="active">3</span></li>
の部分が現在のページを表示している場合のソースなので


そこで必要なのは<span>で円をつくるときはinline-block化をすることです。
というのも<span>の初期値は「display: inline;」となっており、
inline要素だと円を作るときに必要な横幅・縦幅の指定ができません。
そのため(.active{}は<span>タグに使われているので)書き忘れると丸がつくれない！ということが発生します。