哪个css3选择器用于选择悬停时的最后一个子元素？

Question

是否有可能做这样的事情：

<div>
    <ul>
        <li>
            <span>Something</span>
        </li>
        <li>
            <span>Something</span>
        </li>
        <li>
            <span>Something</span>
        </li>
    </ul>

    <p>Some text</p>
</div>

因此，当我将鼠标悬停在任何'li'标签上时，'p'标签会受到影响。我知道我可以通过以下方式影响示例中的“span”：

li:hover span{
    /* Whatever css that is needed */
}

我正在考虑与第n个孩子的事情，我是否正确地想到这个想法？

div li:hover <some nth child syntax that I don't know>{
    /* Whatever css that is needed */
}

或者我对任何其他想法持开放态度，只要它们是严格的css ...... :-)不要担心浏览器的交叉兼容性......

Answer 1

我认为你所追求的是jQuery的:has()选择器。不幸的是，这不是任何CSS规范的一部分。

可以这样使用：div:has(li:hover) > p。

在标准CSS中，我认为不可能。

---

如果你满足于在ul的任何部分悬停（包括它的孩子，那么这将有效（demo）时对p进行样式设置：

ul:hover + p {
    color: red;
}