form标签内input:focus无法触发同级ul显示的CSS选择器问题求助

嘿，这个问题我之前也踩过坑！咱们先把问题根源理清楚：

你当前的HTML结构应该是类似这样的吧？

<form>
  <input class="inputclass" type="text">
</form>
<ul class="ulclass">
  <!-- 列表内容 -->
</ul>

你的CSS用了+相邻兄弟选择器，它的规则是只能选中紧挨着当前元素的下一个同级元素。当input被包裹在form里时，input的同级元素是form内部的其他元素，而ul是form的同级元素，不是input的，所以input:focus + ul这个选择器根本匹配不到目标ul。但移除form后，input和ul变成了直接同级，选择器自然就生效了。

下面给你几个可行的解决方案，按需选择：

方案1：调整HTML结构（最推荐） #

如果可以修改HTML，把ul放到form内部，作为input的直接相邻兄弟，这样原来的CSS完全不用改就能正常工作：

<form>
  <input class="inputclass" type="text">
  <ul class="ulclass">
    <li>选项1</li>
    <li>选项2</li>
  </ul>
</form>

方案2：使用:has()伪类（无需改结构） #

现在主流浏览器（Chrome、Firefox、Edge等）都支持:has()伪类了，它可以帮我们选中包含特定状态元素的父元素，然后再选中父元素的相邻兄弟ul：

.ulclass {
  background: #f0a;
  display: none;
  height: 200px;
  width: 200px;
}

/* 当form内部的input获得焦点时，选中form的下一个同级ul */
form:has(input.inputclass:focus) + ul.ulclass {
  display: block;
}

方案3：JS兜底方案（兼容旧浏览器） #

如果需要支持IE这类不支持:has()的旧浏览器，就用JS监听input的焦点事件来控制ul的显示：

const targetInput = document.querySelector('form input.inputclass');
const targetUl = document.querySelector('ul.ulclass');

targetInput.addEventListener('focus', () => {
  targetUl.style.display = 'block';
});

targetInput.addEventListener('blur', () => {
  targetUl.style.display = 'none';
});

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