仅用CSS实现：.entry:focus-visible时修改#target:invalid状态边框

仅靠纯CSS无法直接实现你想要的效果，核心原因是CSS选择器只能选择当前元素的后代、后续兄弟元素，无法反向选中前置的兄弟元素——你的HTML结构中#target在.entry之前，当.entry触发:focus-visible状态时，CSS没有语法能向前选中前面的#target。

你用CSS变量失败的原因 #

CSS变量的作用域是向下传递的：你在.entry:focus-visible中定义的--blah，只能影响.entry本身及其内部的后代元素，无法向上传递到:root，也不能向前作用于位置更靠前的#target。因此#target:invalid始终读取的是:root中定义的初始--blah值，不会随.entry的状态变化而更新。

纯CSS可行的前提：调整HTML结构 #

如果能调整元素的顺序，把.entry放在#target之前，就可以用通用兄弟选择器实现需求：

修改后的HTML

<p><input class='entry'></p>
<p><input class='entry'></p>
<p><input id='target' required></p>

对应的CSS

input {
  outline: none;
  border: 1px solid #555;
  border-radius: 3px;
}

input:focus-visible {
  outline: none;
  border: 1px solid #28f;
  border-radius: 3px;
}

/* 当任意.entry处于:focus-visible，且#target处于:invalid状态时，修改边框 */
.entry:focus-visible ~ #target:invalid {
  border-color: red;
}

无法调整HTML结构的情况 #

如果不能修改HTML元素的顺序，那么必须借助JavaScript来监听.entry的聚焦状态，动态切换#target的样式，纯CSS无法完成这种反向状态关联。

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