Правильно ли выбран этот CSS-селектор?

Question

Кажется, это не работает. Стили nth-child (2) должны быть разными при наведении, если nth-child (3) имеет значение .active

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, это невозможно, поскольку комбинаторы-братья + и ~ не смотрят назад.

Вы должны либо изменить свой HTML-код, чтобы каким-либо образом приспособиться к этим условиям, либо использовать обход DOM (намного проще).

Answer 2

Если вы хотите выбрать активный li и применить наведение, этого селектора достаточно: li.active:hover

вот пример скрипка

Если вы хотите выбрать li перед активным li, вам нужно будет использовать JavaScript.

Другой вариант заключается в том, чтобы распознать, какой li указан перед текущим активным li, при рендеринге страницы JSP (или выбранной вами технологии) и дать ему соответствующее наведение.