如何用CSS combinators实现基于checkbox的物品颜色筛选功能？

嗨，我来帮你搞定这个筛选的问题！首先得说，你的思路是对的，完全可以用CSS combinators来实现需求，只是当前的CSS逻辑写反了，导致初始状态所有物品都被隐藏了。

问题根源 #

你现在的CSS规则是：当checkbox处于:checked状态时，隐藏对应颜色的物品。而你的HTML里所有checkbox默认都是checked的，所以初始时所有物品都被display: none隐藏了，这和你想要的「初始全可见」正好相反。

修正方案 #

我们需要把逻辑翻转过来：默认所有物品都可见，当checkbox未被勾选（:not(:checked)）时，才隐藏对应颜色的物品。这样初始所有checkbox都是勾选状态，所有物品自然全部显示；当取消某个颜色的勾选，该颜色的物品就会被隐藏，剩下的勾选颜色物品保留显示，完美符合你的需求。

修改后的关键CSS代码如下：

/* 默认所有物品可见 */
.item {
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
  display: block; /* 显式声明默认可见，避免浏览器默认样式问题 */
}

/* 当checkbox未被勾选时，隐藏对应颜色的物品 */
input#green:not(:checked) ~ .filter-items .item.green,
input#red:not(:checked) ~ .filter-items .item.red,
input#pink:not(:checked) ~ .filter-items .item.pink,
input#blue:not(:checked) ~ .filter-items .item.blue {
  display: none;
}

完整修正后的CSS #

把原来的CSS替换成下面的代码，就能实现你要的效果：

input {
  display: none;
}

label {
  padding-left: 1px;
  display: inline-block;
  background-color: green;
  width: 44px;
  height: 25px;
  cursor: pointer;
  margin: 5px 3px 1px; /* 把原来的margin移到默认label样式里，避免取消勾选时的布局跳动 */
}

.blue { background-color: blue; }
.green { background-color: green; }
.pink { background-color: pink; }
.red { background-color: red; }

.filter-items {
  width: 100%;
  height: 600px;
  background-color: darkcyan;
}

.item {
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
  display: block;
}

/* 核心筛选规则：未勾选时隐藏对应颜色 */
input#green:not(:checked) ~ .filter-items .item.green,
input#red:not(:checked) ~ .filter-items .item.red,
input#pink:not(:checked) ~ .filter-items .item.pink,
input#blue:not(:checked) ~ .filter-items .item.blue {
  display: none;
}

/* 取消勾选时的label样式 */
input:not(:checked) + label {
  background: none;
  box-shadow: none;
  border: 1px solid #ccc; /* 可以加个边框，让未勾选状态更明显 */
}

为什么CSS combinators可行？ #

你的checkbox和.filter-items是同级的兄弟元素，使用兄弟选择器~可以准确选中checkbox后面的.filter-items容器，再通过后代选择器定位到对应颜色的物品，完全符合CSS选择器的规则，不需要额外的JavaScript就能实现需求。

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