如何仅用CSS为父元素含id为message兄弟的input添加边框颜色

你可以用CSS的:has()伪类来搞定这个需求，它能让我们根据元素的兄弟关系选中目标元素。

具体代码如下：

/* 选中后面紧跟着#message的div，再选中它内部的input，添加红色边框 */
div:has(+ #message) input {
  border: 2px solid red;
}

补充说明 #

:has()是现代主流浏览器都支持的特性（Chrome、新版Firefox、Safari等均兼容），如果需要兼容老旧浏览器，纯CSS确实没有其他可行方案——毕竟CSS原生没有“选择前置兄弟元素”的选择器，但当前绝大多数场景下这个方案完全够用。

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