仅用CSS实现多条件商品筛选的解决方案咨询

核心思路 #

利用CSS属性选择器、兄弟选择器（或:has()伪类）结合复选框状态，通过逻辑与的选择器组合，匹配同时满足所有选中筛选条件的商品，实现多条件筛选。核心是给商品标记所有筛选维度的标签，再通过选中的复选框对应的选择器，精准显示符合所有条件的商品。

方案一：传统选择器（无:has()，兼容旧浏览器） #

适合筛选条件较少、组合数可控的场景，无需依赖:has()伪类。

HTML结构

给每个筛选复选框添加data-filter属性（值对应商品的条件标签），给商品添加data-tags属性（空格分隔所有符合的条件标签）：

<div class="filters">
  <h3>颜色筛选</h3>
  <label><input type="checkbox" data-filter="color-red"> 红色石材</label>
  <label><input type="checkbox" data-filter="color-gray"> 灰色石材</label>
  
  <h3>尺寸筛选</h3>
  <label><input type="checkbox" data-filter="size-small"> 小尺寸</label>
  <label><input type="checkbox" data-filter="size-large"> 大尺寸</label>
</div>

<div class="products">
  <div class="product" data-tags="color-red size-small">红色小尺寸石材</div>
  <div class="product" data-tags="color-red size-large">红色大尺寸石材</div>
  <div class="product" data-tags="color-gray size-small">灰色小尺寸石材</div>
  <div class="product" data-tags="color-gray size-large">灰色大尺寸石材</div>
</div>

CSS实现

1. 默认显示所有商品；
2. 任意复选框选中时，先隐藏所有商品；
3. 针对单条件和所有可能的多条件组合，编写选择器显示符合条件的商品：

/* 默认样式 */
.product {
  margin: 8px 0;
  padding: 12px;
  border: 1px solid #e0e0e0;
}

/* 有筛选条件选中时，先隐藏全部商品 */
.filters input:checked ~ .products .product {
  display: none;
}

/* 单条件筛选：显示对应标签的商品 */
.filters input[data-filter="color-red"]:checked ~ .products .product[data-tags~="color-red"] {
  display: block;
}
.filters input[data-filter="color-gray"]:checked ~ .products .product[data-tags~="color-gray"] {
  display: block;
}
.filters input[data-filter="size-small"]:checked ~ .products .product[data-tags~="size-small"] {
  display: block;
}
.filters input[data-filter="size-large"]:checked ~ .products .product[data-tags~="size-large"] {
  display: block;
}

/* 多条件组合：红色+小尺寸（需考虑复选框顺序，所以写两种顺序的选择器） */
.filters input[data-filter="color-red"]:checked 
+ input[data-filter="size-small"]:checked ~ .products .product[data-tags~="color-red"][data-tags~="size-small"],
.filters input[data-filter="size-small"]:checked 
+ input[data-filter="color-red"]:checked ~ .products .product[data-tags~="color-red"][data-tags~="size-small"] {
  display: block;
}

/* 同理添加其他多条件组合：红色+大尺寸、灰色+小尺寸、灰色+大尺寸 */
.filters input[data-filter="color-red"]:checked 
+ input[data-filter="size-large"]:checked ~ .products .product[data-tags~="color-red"][data-tags~="size-large"],
.filters input[data-filter="size-large"]:checked 
+ input[data-filter="color-red"]:checked ~ .products .product[data-tags~="color-red"][data-tags~="size-large"] {
  display: block;
}

.filters input[data-filter="color-gray"]:checked 
+ input[data-filter="size-small"]:checked ~ .products .product[data-tags~="color-gray"][data-tags~="size-small"],
.filters input[data-filter="size-small"]:checked 
+ input[data-filter="color-gray"]:checked ~ .products .product[data-tags~="color-gray"][data-tags~="size-small"] {
  display: block;
}

.filters input[data-filter="color-gray"]:checked 
+ input[data-filter="size-large"]:checked ~ .products .product[data-tags~="color-gray"][data-tags~="size-large"],
.filters input[data-filter="size-large"]:checked 
+ input[data-filter="color-gray"]:checked ~ .products .product[data-tags~="color-gray"][data-tags~="size-large"] {
  display: block;
}

方案二：使用:has()伪类（简化多条件逻辑） #

如果你的目标浏览器支持:has()（Chrome 105+、Firefox 121+、Safari 15.4+），可以大幅简化代码，无需提前写所有多条件组合。

CSS实现

.product {
  margin: 8px 0;
  padding: 12px;
  border: 1px solid #e0e0e0;
}

/* 无筛选时显示所有商品 */
.products .product {
  display: block;
}

/* 有任意筛选条件选中时，先隐藏所有商品 */
.filters:has(input:checked) .products .product {
  display: none;
}

/* 单条件匹配：显示对应标签的商品 */
.filters:has(input[data-filter="color-red"]:checked) .products .product[data-tags~="color-red"] {
  display: block;
}
.filters:has(input[data-filter="color-gray"]:checked) .products .product[data-tags~="color-gray"] {
  display: block;
}
.filters:has(input[data-filter="size-small"]:checked) .products .product[data-tags~="size-small"] {
  display: block;
}
.filters:has(input[data-filter="size-large"]:checked) .products .product[data-tags~="size-large"] {
  display: block;
}

/* 多条件叠加：只有同时满足所有选中条件的商品才会显示 */
.filters:has(input[data-filter="color-red"]:checked):has(input[data-filter="size-small"]:checked) .products .product:not([data-tags~="color-red"][data-tags~="size-small"]) {
  display: none;
}
.filters:has(input[data-filter="color-red"]:checked):has(input[data-filter="size-large"]:checked) .products .product:not([data-tags~="color-red"][data-tags~="size-large"]) {
  display: none;
}
.filters:has(input[data-filter="color-gray"]:checked):has(input[data-filter="size-small"]:checked) .products .product:not([data-tags~="color-gray"][data-tags~="size-small"]) {
  display: none;
}
.filters:has(input[data-filter="color-gray"]:checked):has(input[data-filter="size-large"]:checked) .products .product:not([data-tags~="color-gray"][data-tags~="size-large"]) {
  display: none;
}

局限性说明 #

• 纯CSS方案的筛选逻辑完全依赖选择器，若筛选维度多（比如5种颜色+4种尺寸），需要编写的组合选择器数量会呈指数增长，维护成本极高；
• 传统方案中，复选框的DOM顺序会影响选择器生效，需要额外处理不同顺序的组合；
• :has()方案需要考虑浏览器兼容性，若需兼容旧版浏览器，只能用传统方案。

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