让:hover选择器在包含其他元素的锚点(anchor)上生效

嘿，这个问题我之前也碰到过！核心原因是CSS样式优先级和继承的冲突，咱们一步步拆解解决：

问题根源 #

虽然HTML5允许<a>标签包裹块级元素（比如<p>），但你的<p>元素本身设置了固定的color: #222222——这个直接作用在<p>上的样式，优先级比父元素<a:hover>的颜色设置更高。哪怕你给a:hover加了!important，也因为<p>的color是直接应用在自身的，所以不会被父元素的color覆盖。

解决方案 #

这里有两种靠谱的解决思路：

思路1：让<p>继承父元素颜色 #

把<p>的固定颜色改成继承父元素的颜色，同时把基础文本颜色放在更上层的元素（比如<body>）上，这样既能保留全局文本颜色，又能让<a>的hover样式生效：

body { color: #222222; } /* 把基础颜色放在body上 */
p { color: inherit; } /* 让p继承父元素颜色 */
a:link { color: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: none; }
a:hover { color: red; text-decoration: none; }

思路2：直接给嵌套的<p>写hover样式 #

如果不想改动全局<p>的样式，可以单独给被<a>包裹的<p>设置hover时的颜色：

p { color: #222222; }
a:link { color: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: none; }
a:hover { color: red; text-decoration: none; }
a:hover p { color: red; } /* 新增这行，指定a hover时内部p的颜色 */

额外提示 #

HTML5允许<a>包裹块级元素是合法的，但如果需要兼容一些非常老旧的浏览器，可能需要把<p>改成display: inline-block的行内块元素，不过现在主流浏览器都支持HTML5的这个规则啦。

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