Question

我在段落标记中使用ul并使用css隐藏它但它不会工作，任何人都可以帮助我吗？这是我的HTML：

<p id="transport">
 <img class="draco" src="../image/draco.png"/>
 <ul>
     <li><a href="">a</a></li>
     <li><a href="">b</a></li>
     <li><a href="">c</a></li>
     <li><a href="">d</a></li>
     <li><a href=""></a></li>
 </ul>
</p>

这是我的css：

p#transport ul{
 background-color: rgba(0,0,0,1.0);
 position: absolute;
 float: right;
 display: none;
}
p#transport:hover ul{
 display: block;
}

任何人请快速保存！

Answer 1

这是因为您在ul代码中没有p，大多数浏览器都会为您更改HTML：将ul放在p代码之外。这就是它最终看起来像：

<p id="transport">
    <img class="draco" src="../image/draco.png">
</p>
<ul>
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>
    <li><a href="">d</a></li>
    <li><a href=""></a></li>
</ul> 
<p></p>

检查http://jsfiddle.net/6a0awqgv/embedded/result/。将源代码与控制台中的元素检查器进行比较。

所以要克服它，你可以做到：

p#transport + ul {
    background-color: rgba(0,0,0,1.0);
    position: absolute;
    float: right;
    display: none;
}

p#transport:hover + ul{
    display: block;
}

+是adjacent selector

Answer 2

这是因为您无法将ul放入p。浏览器会将其解释为忘记关闭p标记并将其自行关闭。这就是CSS规则不适用的原因。

将p标记更改为div，它会正常工作。

为什么不能用这样的css隐藏我的ul？

2 个答案: