ＨＴＭＬ と ＣＳＳ について

質問

以下のようなＨＴＭＬとＣＳＳですが…

<div id="xxx">
<ul>
<li id="s-a"><a href="index.html">select a</a></li>
<li id="s-b"><a href="index.html">select b</a></li>
</ul>
</div>

～～～～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～～～～

#xxx {
width: 500px ;
height: 100px ;
}

#xxx ul {
padding: 10px 0px 0px 50px;
}

#xxxx li {
padding: 0 ;
float: left ;
}

#xxx #s-a a {
width: 80px ;
height: 30px ;
margin: 0 ;
padding: 0 ;
background-image: url("ssaa.gif") ;
float: left ;
}

#xxxxx #s-b a {
width: 80px ;
height: 30px ;
margin: 0 ;
padding: 0 ;
background-image: url("ssbb.gif") ;
float: left ;
}

このような手法について、

なぜ　id="s-a"　id="s-b"　id="s-c"　は
ａ要素ではなくｌｉ要素の中に設定する必要が
あるのでしょうか？
実際、確かにこれをＡ要素に設定すると
リンク画像が表示されず消えてしまうことは
確認しました。
それがなぜなのか？
このような手法をとるのはなぜか？
そして、これらは何に絡む話しなのか？
（継承？適用範囲？インラインとかブロック？
　ブラウザによる表示の違いへの対応？
　Ｗ３Ｃ関連？）

ＣＳＳを初心者でよく解りません。
また、持ち合わせの資料や、参考にして
いるサイトでもよく解りません。

質問自体が無茶苦茶で、さらには的の広すぎる
質問になっている様な気もし、申し訳ないですが
アドバイス、解りやすいサイトなどご存知
な方がおられましたら、ご教授下さいませ。
よろしくお願いいたします。

回答No.1

suzuko

>なぜ　id="s-a"　id="s-b"　id="s-c"　は
ａ要素ではなくｌｉ要素の中に設定する必要が
あるのでしょうか？

絶対の必要はないでしょうね。これを制作された方の都合ですし、CSSの内容から言って、ナビゲーションだと思うので、アビリティを上げる意味でリストになさっているのでしょう。CSSが効かない状態や音声プラウザに対応するためです。

>実際、確かにこれをＡ要素に設定すると
リンク画像が表示されず消えてしまうことは
確認しました。

？？？？どのように確認されましたか？
書いてらっしゃるCSSの"xxx"が同じと仮定するならば、（違う場合は情報が少ないので検証できません）

<div id="xxx">
<ul>
<li id="s-a"><a href="index.html">select a</a></li>
<li id="s-b"><a href="index.html">select b</a></li>
</ul>

<p id="s-a"><a href="index.html">select a1</a>
</p>
</div>

とHTMLに書けば、select a1に背景画像がつきますよ。