スタイルシートで、指定したクラスのみマウスオーバー時の色を変える

 記述方法でしばし悩んだので覚書。
　やりたい事は、マウスをリンクの上に重ねたら色と背景色を変えたい。ただし、HTML全体じゃなく、指定箇所のみそんなふうにしたい、ってことだ。そして、スタイルシートを別ファイルで用意する形で実現したい。
　色々調べたり試行錯誤した結果、スタイルシート内でタグ名.クラス名:hover{} で、マウスオーバー時のスタイルを指定し、HTML内のaタグで「class=」でクラス名を指定すればOKのようだ。
　下の例では、a.pagenumberに共通部分を設定し、link,visited,hoverでそれぞれ色と背景色を変えている。
　ただし、「link,visited」のあとに「hover」を記述するという順番を守った方が無難っぽい。
参考）実は重要！スタイルシートの記述順！　a:hover使ってもリンク無変化!? - ［ホームページ作成］All About

スタイルシート例

a.pagenumber{

 float: left;

 width: auto;

 padding-top: 3px;

 padding-right: 5px;

 padding-bottom: 3px;

 padding-left: 5px;

 margin-right: 3px;

 margin-left: 3px;

}

a.pagenumber:link,

a.pagenumber:visited{

 color: #FFFFFF;

 background-color: #33FF99;

}



a.pagenumber:hover{

 color: #FFFFFF;

 background-color: #339999;

}

 HTML例

  <a class="pagenumber" href="/?p=0">1</a>

  <a class="pagenumber" href="/?p=1">2</a>

  <a class="pagenumber" href="/?p=2">3</a>

  <a class="pagenumber" href="/?p=3">4</a>

  <a class="pagenumber" href="/?p=4">5</a>

 #idname など、#で始まる記述は、タグ内で「id=」として使うものっぽいがよくわからない。実際に試してはいないが、たぶんこうじゃないかみたいなメモを残しておいて後で試そう。
--
スタイルシート内で以下のように定義
#dot{
....
}
#top{
....
}
HTMLで以下のように指定
<a class="pagenumber" id="dot">・・・</a>

<a class="pagenumber" id="top">トップページ</a>
これで基本pagenumberクラスのスタイルを持ちながらも、#dotや#topで記述した部分だけスタイルを上書き？してバリエーションを持たせるために使うんだと思う。