如何仅用CSS实现密码输入框聚焦时显示强度提示div？

你写的CSS没生效是因为+相邻兄弟选择器的匹配规则问题：.password-input:focus + .strengthClass要求.strengthClass必须是.password-input紧挨着的同级下一个元素，但是你的强度提示、规则提示都封装在.password-rules容器内部，和输入框不是直接同级相邻，所以选择器匹配不到元素。

要纯CSS实现效果，需要保证.password-input输入框和.password-rules容器是同一个父级下的同级元素，结构参考如下：

<input type="password" class="password-input" placeholder="输入密码">
<StrengthStyled className="password-rules">
  <!-- 原有内部代码不变 -->
</StrengthStyled>

修改你的选择器逻辑如下即可生效：

/* 原有样式不变，仅调整显示控制的选择器 */
.strengthClass{
  max-width: 200px;
  height: 30px;
  padding: 5px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 25px;
  background-color: #FF68A7;
  display: none;
        
  span{
    color: white;
    text-align: center;
  }
}

.rules-details{
  display: none; 
}

/* 输入框聚焦时，选中后续的.password-rules容器内的目标元素，设置显示 */
/* 如果输入框和.password-rules是紧挨着的相邻兄弟，用+ */
.password-input:focus + .password-rules .strengthClass,
.password-input:focus + .password-rules .rules-details {
  display: block;
}

/* 如果两者中间有其他同级元素，把+换成通用兄弟选择器~即可
.password-input:focus ~ .password-rules .strengthClass,
.password-input:focus ~ .password-rules .rules-details {
  display: block;
}
*/

如果.password-input和.password-rules不在同一个父级容器下，纯CSS无法跨父级选中元素，需要配合JS实现聚焦/失焦事件控制显示状态。

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