如何实现非hover元素降低透明度的CSS效果？

你的代码没达到预期效果，核心原因是两个选择器优先级相同，后面的p { opacity: 1; }把前面p:not(:hover)的样式覆盖了。

最简单的修复方案：调整代码顺序 #

把默认样式放在前面，:not(:hover)的样式放在后面，靠后声明的相同优先级样式会生效：

p {
    opacity: 1;
}

p:not(:hover) {
    opacity: 0.6;
}

原理说明 #

• 所有<p>元素默认透明度为1
• 当某个<p>没有被hover时，会匹配p:not(:hover)选择器，应用0.6的透明度
• 被hover的<p>不会触发:not(:hover)规则，保持默认的opacity:1，实现「高亮hover元素，降低其他元素透明度」的效果

如果你的<p>有父容器，也可以通过给父容器加hover事件来实现类似效果（适合需要整体触发的场景）：

.container p {
    opacity: 1;
    transition: opacity 0.2s; /* 加过渡动画让效果更流畅 */
}

.container:hover p:not(:hover) {
    opacity: 0.6;
}

这种写法的好处是，只有当鼠标进入容器内时，才会触发未hover元素的透明度变化，交互体验更连贯。

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