勾选checkbox后无法通过CSS修改nav的left属性，如何解决？

你判断的没错，问题核心是CSS兄弟选择器~只能选中当前元素的同级后续元素——你的#check复选框在<header>内部，而<nav>是<header>的同级元素，原选择器#check:checked ~ header nav完全匹配不到目标<nav>。

提供两种可行方案，可根据需求选择：

方案1：调整HTML结构（兼容性最优） #

将复选框移到<header>外部，和<nav>同级，这样就能用兄弟选择器直接选中<nav>：
修改后的HTML：

<body>
  <div class="headernnav">
      <input type="checkbox" id="check">
      <header>
          <div class="headertitle">EVERGREEN GRASS SUPPLIERS</div>
          <label for="check" class="checkbtn">
              <i class="fas fa-bars"></i>
          </label>
      </header>
      
      <nav>
          <div class="firstitem"><a href="home.html" class="anav active">HOME</a></div>
          <div class="item"><a href="aboutus.html" class="anav">ABOUT US</a></div>
          <div class="item"><a href="gallery.html" class="anav">GALLERY</a></div>
          <div class="item"><a href="shop.html" class="anav">SHOP</a></div>
          <div class="lastitem"><a href="contactus.html" class="anav">CONTACT US</a></div>
      </nav>
  </div>
</body>

对应的CSS：

#check:checked ~ nav {
    left: 0;
}

方案2：使用CSS :has() 伪类（无需修改HTML） #

如果不想调整HTML结构，可以用:has()伪类检测<header>内部的复选框是否被勾选，再选中同级的<nav>：

header:has(#check:checked) ~ nav {
    left: 0;
}

注意：:has()伪类目前支持Chrome 105+、Firefox 121+、Safari 15.4+，若需兼容旧浏览器，优先选择方案1。

确保你的<nav>元素满足以下条件，否则left属性不会生效：

• 设置了定位方式：比如position: fixed、position: absolute或position: relative
• 初始状态有left值：比如left: -100%（这样勾选后可从左侧滑入）

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