如何在CSS中引用兄弟元素的CSS属性值保持边框颜色同步？

当然可以实现！而且有几种靠谱的方案，能确保你的兄弟元素和输入框的边框颜色始终保持同步——不管是浏览器默认样式，还是用户自定义的主题设置变化，都能完美同步。下面给你详细说几个实用的方法：

方案1：使用CSS系统颜色关键字（最简单，首推） #

CSS自带了一系列系统颜色关键字，专门用来匹配浏览器/操作系统的默认UI样式。其中FieldBorder就是对应表单元素（比如input）的默认边框颜色，直接给你的兄弟元素用这个值就行：

.sibling-element {
  border-color: FieldBorder;
  /* 别忘了设置边框样式和宽度，不然颜色不会显示出来 */
  border-style: solid;
  border-width: 1px;
}

这个方案完全不需要额外配置，自动跟随浏览器的默认样式和用户的自定义设置（比如用户把浏览器的表单边框改成了蓝色，你的兄弟元素也会自动变成蓝色），兼容性也拉满（除了极旧的浏览器，几乎所有现代浏览器都支持）。

方案2：使用CSS变量（自定义场景更灵活） #

如果你需要后续动态修改边框颜色，或者想统一控制多个元素的样式，用*CSS变量（Custom Properties）*是更灵活的选择：

1. 先在全局或者父容器定义一个变量，默认用系统颜色和输入框保持一致：

:root {
  --input-border-color: FieldBorder;
}

2. 让输入框和兄弟元素都引用这个变量：

input {
  border-color: var(--input-border-color);
  /* 保留输入框默认的边框宽度和样式，只覆盖颜色即可 */
}

.sibling-element {
  border-color: var(--input-border-color);
  border-style: solid;
  border-width: 1px;
}

这样不管你是手动修改变量值，还是通过JavaScript动态调整，输入框和兄弟元素的边框颜色都会同步变化。初始值用FieldBorder也保证了和浏览器默认样式完全一致。

方案3：使用:has()选择器（现代浏览器专属） #

如果你不需要兼容旧浏览器（比如IE，或者Chrome版本低于105），可以用CSS的:has()选择器直接关联兄弟元素和输入框的样式：

/* 当父容器包含input时，让它的兄弟元素使用和input一样的边框颜色 */
.parent-container:has(input) .sibling-element {
  border-color: var(--input-border-color);
  border-style: solid;
  border-width: 1px;
}

不过这个方案的兼容性不如前两个，所以如果需要支持更多用户，还是优先考虑前两种方法。

最后提个小细节：不管用哪个方案，兄弟元素都要设置border-style和border-width，因为默认的border-style是none，只设置颜色不会显示边框哦！

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