css - 为什么 css3 只有 + 和 ~ 兄弟组合？那么如何解决这种问题？

Question

<div class="box">
    <a><p>hello-1</p></a>
    <p>world</p>
    <a><p>hello-2</p></a>
</div>

我想在悬停时使用 CSS3 制作<a>，只会<p>world</p>将颜色变为红色。

但是，在 CSS3 中，如果使用div.box a:hover + p, 仅适用于将鼠标悬停在 上hello-1，hello-2无效。

+并且~在 CSS3 之后所有元素都在为元素工作，有没有办法让这两个在悬停时<a>可以改变<p>world</p>颜色？

Answer 1

试试这个：

.box:hover > p { color: red; }
.box > p:hover { color: black; }

现场演示