如何在header nav的input被选中时定位<main>与<footer>标签？

你的问题出在选择器层级错误：原代码里的nav input:checked+main试图选中input的相邻兄弟main，但实际上input的直接相邻元素是<ul>，而且<main>是<header>的同级兄弟，和input不在同一层级，所以这个选择器无法匹配到目标元素。

不需要修改HTML结构，用CSS的:has()伪类就能实现需求，它可以让父元素根据子元素的状态来应用样式。

完整代码示例 #

CSS

/* 当header内的nav输入框被选中时，修改其相邻的main样式 */
header:has(nav input:checked) + main {
  background-color: red;
  color: white;
  padding: 1rem;
}

/* 同时修改main之后的footer样式 */
header:has(nav input:checked) + main ~ footer {
  background-color: #333;
  color: white;
  padding: 1rem;
}

HTML

<header>
  <nav>
    <input type="checkbox">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </nav>
</header>
<main>
  Main page content
</main>
<footer>
  Footer content
</footer>

说明 #

• header:has(nav input:checked)：选中包含“被选中的nav输入框”的header元素
• + main：选中header的直接相邻兄弟main
• ~ footer：选中main之后的所有同级footer元素（如果有多个footer也能匹配，但一般页面只有一个）

:has()伪类目前已被Chrome、Firefox 121+、Safari等主流浏览器支持，完全满足日常开发需求。

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