html - CSS クラスの問題

Question

私は現在、クラスとIDセレクターのアイデアに頭を悩ませています。以下に掲載されているのは、私のナビゲーション用の現在のマークアップです。CSS スタイルシートで達成しようとしているのは、水平メニューです。

.navigation-menuこのクラス ( .navigation-main)内のすべてのスタイルを対象にできないのはなぜですか?

<nav class="navigation-main">
    <ul class="menu">
        <li class"home"><a href="index.html">Home</a></li>
        <li class"submit"><a href="submit.html">Submit a Pic</a></li>
        <li class"advertise"><a href="advertise.html">Advertise</a></li>
        <li class"contact"><a href="contact.hml">Contact</a></li>
    </ul>
</nav>​

---

CSS

.navigation {
display:inline;

}

Answer 1

要素をターゲットにしていません:

.navigation-main li{
   display:inline;
}

Answer 2

CSS セレクターの仕組みについて混乱しているようです。クラスが実際に一致するには、定義と同じ名前が必要です。

HTML

<div class="my-class"></div>

CSS

.my-class
{
  ...
}

それで、あなたの質問に答えるために（現在のように）、なぜ.navigation-menu内のすべてをスタイルすることをターゲットにできないのですか.navigation-main。これは、CSS クラス.navigationが現在の HTML のどのクラスとも一致しないためです。

NAV のスタイルを設定するにはclass="navigation-main":

CSS

.navigation-main 
{
  ...
}

class="menu"を使用して NAV 内にあるUL のみをスタイルするには、次のようにしclass="navigation-main"ます。

CSS

.navigation-main .menu 
{
  ...
}

NAV 内のすべての要素のスタイルを設定するにはclass="navigation-main"

CSS

.navigation-main *
{
  display:inline;
}

Answer 3

質問によると、navigation使用されていないクラスにcssを適用するため、cssを適用するにはこのクラスを含める必要があります

試す

 .navigation-main li {
    display:inline;
}

Answer 4

あなたはこれを探しています：

.menu li {display:inline;}