タグ リストについての質問です。（超初心者です）

質問

タグ　リストについての質問です。（超初心者です）
リストについてなのですが、複数のリストに複数のスタイルを設定したいのですができません。
何が悪いのか教えて下さい。また解決方法も教えて下さい。

ホームページ作成の初心者です。悪戦苦闘しながら作成しています。

タグについてyahoo知恵袋や教えて!gooなどたくさん調べたつもりなのですが、分かりません・・・
教えて下さい。

複数のリストに各々スタイルを指定したいのですが、２つめのリストに反映されません。
スタイルシートで作成しているのですが・・・
どのようにしたら良いのでしょうか？

== HTMLは、下記のような形 ==
<div id="main">
・
・
・
<div id="navigation">
<dl id="navi">
<dt>野菜の種類</dt>
<dd><a href="#">キャベツ</a></dd>
<dd><a href="#">にんじん</a></dd>
</dl>
<dl id="navi2">
<dt>車の種類</dt>
<dd><a href="#">セダン</a></dd>
<dd><a href="#">ワゴン</a></dd>
</dl>
</div>
・
・
・
</div>

== CSSは、下記のような形 ==

#navigation dl#navi {
background: #999999;
}
#navigation dl#navi dt {
margin: 0 0 1px;
}
#navigation dl#navi dd {
background: url(bg_01.png) no-repeat;
}
#navigation dl#navi dd.first {
padding-top: 14px;
background-position: 0 -1px;
}
#navigation dl#navi dd a {
color: #000000;
text-decoration: none
}
#navigation dl#navi dd a:hover {
color: #A6FF28;
}

#navigation dl#navi2 {
background: #FFFF66;
}
#navigation dl#navi2 dt {
margin: 0 0 1px;
}
#navigation dl#navi2 dd {
background: url(bg_01.png) no-repeat;
}
#navigation dl#navi2 dd.first {
padding-top: 14px;
background-position: 0 -1px;
}
#navigation dl#navi2 dd a {
color: #000000;
text-decoration: none
}
#navigation dl#navi2 dd a:hover {
color: #CC0033;
}

上記のような形で、<dl id="navi2">のスタイルが適用されません・・・
なぜでしょうか？

ちなみに<dl id="navi">はちゃんと反映します。

よろしくお願いします。

回答No.1

preta · ベストアンサー

コピーペーストして試してみましたが、dl#navi2にもスタイルが適応されました。
実際のスタイルシートにおいて、
・dl#navi2に関する記述にタイプミスがある
・dl#navi2に関する記述の直前に全角の文字（スペース）がある
・dl#navi2に関する記述がコメントアウトされている
・dl#navi2に関するスタイルがより優先度の高い方法で上書きされている
といったことはないでしょうか？

お礼

返事が遅くなり申し訳ございませんでした。
たぶん、４番目に記載の優先度の関係だったのだと思います。
（初心者なので、その辺勉強不足です…）

とりあえず、動くようになりました。
ありがとうございました。

回答No.2

zeff

リストの一番目のみ上余白を14px取ったりしたいのですよね？
単純にこういうこととは違うのでしょうか。。？

<dl id="navi">
<dt>野菜の種類</dt>
<!-- class="first"を追加 -->
<dd class="first"><a href="#">キャベツ</a></dd>
<dd><a href="#">にんじん</a></dd>
</dl>
<dl id="navi2">
<dt>車の種類</dt>
<!-- class="first"を追加 -->
<dd class="first"><a href="#">セダン</a></dd>
<dd><a href="#">ワゴン</a></dd>
</dl>

複数のスタイルを適用する場合は、
<!-- HTML -->
<dd class="aaa"></dd>
<dd class="aaa bbb"></dd>
<!-- class名の間に空白-->

/* css */
dd.aaa{
background:url();
}
dd.bbb{
padding:**px;
}
とすると一番目はbackgroundのみ、
2番目はbackgroundとpaddingという風にも出来ます。

お礼

ありがとうございました。
私事の件で、お礼が遅くなり申し訳ございませんでした。
class="first"試してみます。
新しいclassの名前の付け方まで教えて頂いて♪
早速試してみたいと思います。

複数のスタイル適用はできました。
質問の方には書いていなかったのですが…
/* css */
dd.aaa{}
ul.ccc{}
dd.bbb{}
ってなっていたのを下記のように…
/* css */
dd.aaa{}
dd.bbb{}
ul.ccc{}
したら動くようになりました。
順番があるんですかね？（初心者なのでワカラナイ）

本当に返事が遅れて申し訳ございませんでした。