仅用CSS和HTML实现容器聚焦：键盘/点击触发样式异常排查

你的问题核心是两个CSS选择器的优先级冲突：当通过Tab键聚焦input时，div:has(input:focus-visible)和div:has(input:focus-within)会同时匹配容器，由于后者写在代码后面，会直接覆盖前者样式，导致红色轮廓无法显示。另外，默认情况下容器div无法被鼠标点击聚焦，你原本的focus-within逻辑其实只有点击到input时才会触发，和“点击容器显示绿色边框”的需求不符。

修正后的代码 #

CSS

div {
  padding: 1em;
  outline: none; /* 清除默认聚焦轮廓 */
}

/* Tab键聚焦input时，容器显示红色轮廓 */
div:has(input:focus-visible) {
  outline: 2px auto red;
  border: 0;
}

/* 直接点击容器时，容器显示绿色边框 */
div:focus {
  border: 1px solid green;
  outline: none;
}

/* 可选：点击input时不触发容器的绿色边框 */
div:has(input:focus) {
  border: none;
}

HTML

<div tabindex="0">
  <input/>
</div>

关键调整说明 #

• 给容器添加tabindex="0"，让它支持鼠标点击聚焦，同时也兼容Tab键切换聚焦。
• 把原本的div:has(input:focus-within)替换为div:focus，让“点击容器触发绿色边框”的逻辑直接绑定到容器自身的聚焦状态，和input的聚焦状态彻底分开，避免样式覆盖。
• 可选的额外样式可以确保点击input时，容器不会同时显示绿色边框，完全区分两种交互场景。

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