如何使用＆gt;访问下层儿童运营商？

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;
}

如何使用“＆gt;”访问较低级别的儿童运营商？我基本上希望列表在c1的悬停时显示。

Answer 1

您需要从标记中删除内联样式（style="display:none"） - 内联样式将覆盖从样式表加载的样式。

相反，请将其放在样式表中：

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

Answer 2

这样做 -

Demo

<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;
}