这个 CSS 选择器是否正确？答案

【问题标题】：Is this CSS selector correct?这个 CSS 选择器是否正确？
【发布时间】：2011-08-19 05:29:35
【问题描述】：

它似乎不起作用。如果 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>

【问题讨论】：

如果 nth-child(3) 为 .active，则悬停时 nth-child(2) 的样式需要不同
如果你想选择LI，它就停留在LI.active之前，我认为这是不可能的。你可以用 jQuery 做到这一点。

标签： html css css-selectors

【解决方案1】：

如果您只需要在li:nth-child(3) 是.active 时才需要选择li:nth-child(2)，这是不可能的，因为兄弟组合符+ 和~ 不会向后看。

您必须修改 HTML 以适应这些条件，或者使用 DOM 遍历（容易得多）。

【讨论】：

现在有办法用 css 向后看吗？
@kreutz：不，根本不可能。
使用 li:nth-child(2):hover 的问题在于，如果 li:nth-child(3) 为 .active，则悬停时的样式会有所不同。

【解决方案2】：

如果你想选择活动的 li 并应用悬停，这个选择器就足够了： li.active:hover

这是一个例子fiddle

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

另一种选择是在呈现 JSP（或您选择的技术）页面时识别哪个 li 是当前活动 li 之前的那个，并给它适当的悬停。

【讨论】：