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 following 悬停的那一个，但我需要 紧接着的 .我是否使用了错误的选择器？

这是一个 fiddle演示问题:

Answer 1

CSS 组合器只能访问后代和后来的 sibling 。他们无法访问以前的。

一旦 CSS4 出现，您可以这样做:

!li! + li:hover

(注意:据我所知，语法尚未最终确定)

然而，与此同时，试试这个:

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

并反转列表中元素的顺序。

Demo