css - >演算子を使用して下の子にアクセスするにはどうすればよいですか？

Question

私のHTMLコードは次のとおりです。

<div class="c1"> Heading
 <div>
    <ul style="display:none">
        <li>Item1</li>
        <li>Item1</li>
    </ul>
 </div>
</div>

これは私のCSSです：

.c1:hover > div ul
{
   display:block;
}

">"演算子を使用して下位レベルの子にアクセスするにはどうすればよいですか？基本的にc1にカーソルを合わせてリストを表示したいです。

Answer 1

マークアップからインラインスタイル（）を削除する必要がありstyle="display:none"ます。インラインスタイルは、スタイルシートからロードされたスタイルをオーバーライドします。

代わりに、これをスタイルシートに入れてください。

.c1 > div ul {
   display:none;
}
.c1:hover > div ul {
   display:block;
}

Answer 2

これを行う -

デモ

<div class="c1"> Heading
 <div>
    <ul>
        <li>Item1</li>
        <li>Item1</li>
    </ul>
 </div>
</div>

CSS

ul{ display: none; }

.c1:hover div ul
{
   display:block;
}