CSS中:focus-within、:hover伪类不生效，点击搜索栏无法显示上方搜索标签如何解决？

• 选择器逻辑错误：CSS 后代选择器只能选中当前元素内部的子元素，你代码里.up_buttons、.dwn_buttons是#bar元素的前置兄弟节点，不是子节点，不可能通过后代选择器匹配到。
• 聚焦触发对象错误：#bar是普通div元素，默认没有可聚焦属性，点击内部输入框时不会触发#bar的:focus伪类。
• 多元素匹配语法错误：你要同时匹配.dwn_buttons和.up_buttons两个类，需要用逗号分隔，你写的空格分隔会被识别为后代匹配逻辑。

把原CSS中最后一段选择器替换为如下代码即可实现需求：

/* 容器内有元素聚焦时，显示两个按钮组 */
.container:focus-within .up_buttons,
.container:focus-within .dwn_buttons {
  visibility: visible;
}

说明：:focus-within伪类会在元素本身或其内部任意元素获得焦点时触发，作用在父容器.container上就可以监听到内部搜索框的聚焦事件，匹配到上方的两个按钮组修改可见性即可，原有布局属性已经在默认样式中定义，不需要重复书写。

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