听起来你想改变复选框的父元素的背景颜色。这可以重新表述为'*if .main contains a checked checkbox then..'。在CSS中，你可以使用:has()伪类来选择一个元素，该元素有一个特定的子元素：

.main:has(input[id='maincheck']:checked) {
  background-color: #ccc;
}

<div class="main">
  <input type="checkbox" id="maincheck">item title
</div>

但请注意，在撰写本文时，Firefox还不支持此功能。（见https://caniuse.com/css-has）

另一种方法是将复选框移动到其父复选框之前。然后，您可以使用next-sibling combinator（+）来选择直接跟随复选框的div：

.wrap {
  position: relative;
}

input[id='maincheck'] {
  position: absolute;
}

label[for='maincheck'] {
  margin-left: 1.5rem;
}

input[id='maincheck']:checked+.main {
  background-color: #ccc;
}

<div class="wrap">
  <input type="checkbox" id="maincheck" />
  <div class="main">
    <label for="maincheck">item title</label>
  </div>
</div>

你不能只使用CSS直接改变父元素的样式，所以你必须使用JavaScript或jQuery。
下面是一个JavaScript方法：

document.addEventListener('DOMContentLoaded', function() {
  // Grab the checkbox element
  const checkBox = document.getElementById("maincheck");

  // Grab the main div
  const mainDiv = document.querySelector(".main");

  // Add an event listener for checkbox changes
  checkBox.addEventListener("change", function() {
    if (this.checked) {
      // If checked, add the 'checked' class to the main div
      mainDiv.classList.add("checked");
    } else {
      // If unchecked, remove the 'checked' class from the main div
      mainDiv.classList.remove("checked");
    }
  });
});

.main {
  /* Default background color */
  background-color: transparent;
}

.main.checked {
  /* Background color when checkbox is checked */
  background-color: #ccc;
}

<div class="main"> 
  <input type="checkbox" id="maincheck">Item Title
</div>

当你选中这个复选框时，.main div的背景颜色将变为#ccc，当你取消选中它时，背景将恢复为透明。