在悬停元素之前的CSS样式元素？

Question

我想更改div 之前<{strong> <{>}之前的任何ul的样式：

<style>
ul:hover + #x {
    display:none;
}
</style>

<div id="x">c</div>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

当我将div放在ul之后，它就可以了。 （当然，因为CSS中的+会选择ul之后的所有#x 。）

但我需要让它以另一种方式运作。我不想使用JavaScript。

我无法将div放在ul之后，因为它会破坏我已经放入的所有其他风格。

Answer 1

CSS中没有“previous sibling”选择器。你想要的是使用JavaScript完成的，但到目前为止还没有纯粹的CSS方法。

这就是说，元素没有必要按照它们被标记的顺序出现。您可以将#x div放在标记中的无序列表之后，并使用CSS使其显示在列表之前。这样，您仍然可以使用+选择器。

Answer 2

如果您并不完全反对使用JavaScript，那么您可以在class代码之前的所有divs添加ul，并使用CSS设置class的样式。< / p>

我认为通过硬编码方式执行此操作是不切实际的，因此您可以使用JavaScript来执行此操作onLoad，这样，在加载页面时脚本只会运行一次并且您避免使用与event listener事件绑定的hover。