如何通过CSS相邻选择器结合复选框隐藏表格列

没问题，咱们可以用CSS的:has()伪类结合相邻兄弟选择器来实现这个需求，完全不需要JavaScript。下面是具体的实现步骤和代码：

1. 调整HTML结构（符合你的页面布局） #

首先确保复选框容器和表格是相邻的兄弟元素，同时给每个复选框加上对应的value属性方便定位：

<div class="checkbox-container">
  <label>
    <input type="checkbox" class="button-check-boxes" value="col1" checked> col 1
  </label>
  <label>
    <input type="checkbox" class="button-check-boxes" value="col2"> col 2
  </label>
  <label>
    <input type="checkbox" class="button-check-boxes" value="col3" checked> col 3
  </label>
</div>

<table>
  <thead>
    <tr>
      <th></th>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1</td>
      <td>aaa</td>
      <td>bbb</td>
      <td>ccc</td>
    </tr>
    <tr>
      <td>row 2</td>
      <td>ddd</td>
      <td>eee</td>
      <td>fff</td>
    </tr>
  </tbody>
</table>

2. 核心CSS代码 #

利用:has()检测容器内的col2复选框状态，再通过相邻选择器+选中后面的表格，隐藏对应列：

/* 核心逻辑：当col2复选框未勾选时，隐藏表格的第三列（对应col2） */
.checkbox-container:has(input[value="col2"]:not(:checked)) + table th:nth-child(3),
.checkbox-container:has(input[value="col2"]:not(:checked)) + table td:nth-child(3) {
  display: none;
}

/* 模拟button-check-boxes样式（你可以替换成自己的样式） */
.button-check-boxes {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

.button-check-boxes:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #2196F3;
}

/* 辅助样式优化 */
label {
  margin-right: 15px;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  margin-top: 20px;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

关键说明 #

• :has()伪类：用来检测.checkbox-container内部是否存在未勾选的col2复选框，这是实现父元素根据子元素状态变化的核心。
• 相邻兄弟选择器+：确保只选中和复选框容器直接相邻的表格，避免影响页面其他表格。
• 列定位：因为你的表格第一列是行标识，所以col2对应的是第3个<th>和<td>，用:nth-child(3)准确定位。
• 兼容性：:has()目前支持Chrome、Edge、Safari 15.4+，如果需要兼容旧版浏览器，可能需要少量JS辅助，但这个纯CSS方案完全符合你的需求。

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