为何:hover伪类对<p>不生效但p:hover可行？如何同时设置悬停样式？

解决方法：单条CSS规则实现双元素悬停效果 #

直接用逗号分隔多个选择器，同时指定<p>和<a>的:hover状态，就能让两者悬停时都变色。修改后的CSS代码如下：

p:hover, a:hover {
    background-color: black;
    color: white;
}

对应的完整HTML代码：

<html>
    <head>
        <style>
            p:hover, a:hover {
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>
        <p>some text</p>
        <a href="https://stackoverflow.com">stackoverflow</a>
    </body>
</html>

原写法失效的原因 #

你的页面因为没有声明标准DOCTYPE（比如开头缺少<!DOCTYPE html>），触发了浏览器的怪异模式（Quirks Mode）。在这种模式下，浏览器会兼容早期网页的遗留行为：:hover伪类默认只对<a>（链接元素）生效，其他元素（比如<p>）不会响应全局的:hover选择器。这就是为什么你用全局:hover时只有<a>变色，换成p:hover后<a>的效果又失效的原因。

如果想让全局:hover对所有元素生效，可以在HTML最开头添加标准DOCTYPE声明，强制浏览器进入标准模式：

<!DOCTYPE html>
<html>
    <!-- 后续代码不变 -->
</html>

内容的提问来源于stack exchange，提问作者BallpointBen