当元素的子元素聚焦时如何修改该元素的同级兄弟元素样式

核心思路 #

利用CSS的:focus-within伪类：当父元素内部有任意元素处于聚焦状态时，该父元素会触发:focus-within状态，配合相邻兄弟选择器+即可选中后续的分隔符元素修改样式。

代码实现 #

纯CSS方案（推荐，兼容性支持Chrome 60+、Firefox 52+、Safari 10.1+） #

你之前的写法逻辑正确，仅需调整对应样式属性即可，更推荐使用明确的类名选择器提升可读性：

.searchBarFirstDiv:focus-within + .seperator {
  /* 替换为你需要的分隔符颜色即可 */
  background-color: #2385bb;
  /* 可按需添加其他样式调整，比如修改高度、透明度、过渡效果等 */
  transition: background-color 0.2s ease;
}

注意：你当前用的是CSS Modules写法（className绑定css变量），直接把上述代码写入对应的.module.css文件即可，类名会自动完成映射，无需额外修改HTML结构。

兼容旧浏览器的JS辅助方案 #

如果需要兼容IE等不支持:focus-within的浏览器，可以通过监听输入框的聚焦失焦事件实现：

// 获取对应DOM元素
const searchInput = document.getElementById('location-search-input');
const seperator = document.querySelector(`.${css.seperator}`);
// 聚焦时添加激活类
searchInput.addEventListener('focus', () => {
  seperator.classList.add('seperator-active');
});
// 失焦时移除激活类
searchInput.addEventListener('blur', () => {
  seperator.classList.remove('seperator-active');
});

配套CSS：

.seperator-active {
  background-color: #2385bb;
}

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