LESS中输入框聚焦时无法为指定ID元素应用样式的问题

首先，你的样式没生效的核心原因是CSS选择器的层级匹配错误——原代码里的#loginPassword:focus #passwordIconDiv是后代选择器，它只会匹配#loginPassword元素内部的#passwordIconDiv，但从你给出的HTML结构来看，这两个元素明显是在同一个父容器（.input-group）下的不同分支，并非父子/后代关系，所以选择器完全找不到目标元素。

具体解决方案 #

假设你的完整HTML结构是这样的（补全了密码输入框的位置）：

<div class="form-group margin-b-0">
  <div class="input-group mb-2 margin-b-0">
    <div class="input-group-prepend margin-b-0">
      <div class="input-group-text margin-b-0" id="passwordIconDiv">
        <i class="fal fa-key"></i>
      </div>
    </div>
    <input type="password" id="loginPassword" class="form-control">
  </div>
</div>

我们需要用通用兄弟选择器（~）来定位输入框的兄弟容器，再找到目标#passwordIconDiv：

// 当密码输入框获取焦点时，修改对应图标容器的边框样式
#loginPassword:focus ~ .input-group-prepend #passwordIconDiv {
  border-bottom: 1px solid rgba(222,145,81, 1);
}

额外优化建议 #

1. 确保初始边框存在：如果#passwordIconDiv原本没有border-bottom，直接设置新样式可能会出现突兀的边框变化，建议先给它加一个透明初始边框，再配合过渡动画提升体验：

#passwordIconDiv {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease; // 平滑过渡颜色变化
}

#loginPassword:focus ~ .input-group-prepend #passwordIconDiv {
  border-bottom-color: rgba(222,145,81, 1);
}

2. 如果输入框在图标容器之前：如果你的HTML结构是输入框在前、图标容器在后，只需要调整选择器的顺序即可（通用兄弟选择器~可以匹配当前元素之后的所有同级兄弟），样式代码和上面保持一致就好。

关键知识点回顾 #

• 后代选择器（空格）：仅匹配目标元素的子/孙等嵌套后代元素
• 通用兄弟选择器（~）：匹配目标元素之后的所有同级兄弟元素
• 相邻兄弟选择器（+）：仅匹配目标元素紧接的下一个同级兄弟元素

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