这个CSS选择器是否正确？

Question

它似乎不起作用。如果nth-child（3）是.active

，那么nth-child（2）的样式在悬停时需要有所不同

CSS：

li:nth-child(3).active ~ li:nth-child(2):hover

HTML：

 <ul>
    <li>
      <h1 id="logo">Logo</h1>
    </li>

    <li>
      <a href="#">Products</a>
    </li>

    <li class="active">
      <a href="#">Parts</a>
    </li>

    <li>
      <a href="#">Resources</a>
    </li>
  </ul>

Answer 1

如果您只在li:nth-child(2) li:nth-child(3)时选择.active，则无法选择+，因为兄弟组合~和{{1}}看起来不合适向后。

您必须修改HTML以某种方式适应这些条件，或者使用DOM遍历（更容易）。

Answer 2

如果要选择活动的li并应用悬停，则此选择器就足够了： li.active:hover

这是一个示例fiddle

如果要在活动li之前选择li，则需要使用JavaScript。

另一种选择是在呈现JSP（或您选择的技术）页面时识别当前活动li之前的li，并为其提供适当的悬停。