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