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

问题描述

| 是否可以做这样的事情：

<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 ... :-)也不必担心浏览器的交叉兼容性...     

解决方法

        我认为您追求的是jQuery的

:has()

选择器。不幸的是，这不是任何CSS规范的一部分。 这样使用：

div:has(li:hover) > p

。 不过，在标准CSS中，我认为这是不可能的。 如果您想在ѭ5的任何部分都悬停时（包括它的孩子）设置p的样式，那么它将起作用（演示）：

ul:hover + p {
    color: red;
}