html - 为什么这个元素会选择自己？

Question

我正在尝试突出显示紧接在悬停项目之前的列表项。

<ul>
    <li><a href="#">link</a></li>  <!-- this one should be highlighted when... -->
    <li><a href="#">link</a></li>  <!-- ...this one is hovered -->
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

li + li:hover但是，由于某种原因， 我正在使用的选择器正在选择自己。li:hover + li选择了li紧随其后的那个，但我需要它之前的那个。我使用了错误的选择器吗？

这是一个演示问题 的小提琴：

Answer 1

CSS 组合子只能访问后代和后来的兄弟姐妹。他们无法访问以前的。

一旦 CSS4 出现，你可以这样做：

!li! + li:hover

（注意：据我所知，语法尚未最终确定）

但是，与此同时，试试这个：

ul, ul>li {transform:scaleY(-1)}

并颠倒列表中项目的顺序。

演示

Answer 2

加号选择器选择加号后面的元素。所以li + li:hover正在寻找一个悬停在另一个li之前li

请参阅相邻兄弟选择器

这是 CSS 中的一个空白，它可能最好用 Javascript 来填补。