时间戳

首页 > 解决方案 > 使用 CSS 组合器为项目创建“过滤器”

html - 使用 CSS 组合器为项目创建“过滤器”

问题描述

我有一个项目列表和 4 个对应于项目颜色的复选框。我需要实现的是，当单击复选框时，所有与颜色不匹配的项目都会被过滤掉。我已经设法实现了一种行为，其中整个项目列表起初不可见，并且所需的项目出现在点击时。但我需要让它们一开始都可见，并且需要的物品要留下，而不需要的物品必须消失。

我的 HTML

<div class="left-column">
            <input type="checkbox" checked name="blue" id="blue">
            <label for="blue" class="blue"></label>
            <input type="checkbox" checked name="green" id="green">
            <label for="green" class="green"></label>
            <input type="checkbox" checked name="pink" id="pink">
            <label for="pink" class="pink"></label>
            <input type="checkbox" checked name="red" id="red">
            <label for="red" class="red"></label>
            <div class="filter-items">
                <div class="green item"></div>
                <div class="red item"></div>
                <div class="green item"></div>
                <div class="pink item"></div>
                <div class="blue item"></div>
                <div class="red item"></div>
                <div class="green item"></div>
                <div class="pink item"></div>
                <div class="blue item"></div>
                <div class="blue item"></div>
                <div class="red item"></div>
                <div class="blue item"></div>
                <div class="red item"></div>
            </div>
        </div>

我的 CSS

input{
display: none;
}
label{
    padding-left: 1px;
    display: inline-block;
    background-color: green;
    width: 44px;
    height: 25px;
    cursor: pointer;
  }
.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;
}
input{display: none}

input#green:checked ~ .filter-items .item.green,
input#red:checked ~ .filter-items .item.red,
input#pink:checked ~ .filter-items .item.pink,
input#blue:checked ~ .filter-items .item.blue{
    display: none;
    border: 1px solid rgb(128, 5, 5);

}
  input:not(:checked) + label{
    background: none;
    box-shadow: none;
    margin: 5px 3p 1px;
  }

这可以使用combinator selectors还是我应该看其他地方来实现？谢谢！

标签： htmlcsscss-selectors

解决方案

你的意思是这样的：

input {
  display: none;
}

label {
  padding-left: 1px;
  display: inline-block;
  background-color: green;
  width: 44px;
  height: 25px;
  cursor: pointer;
}

.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;
}

input:not(:checked)~.filter-items .item {
  display: none;
}

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: block;
}

input:not(:checked)+label {
  background: none;
  box-shadow: none;
  margin: 5px 3px 1px;
}
<div class="left-column">
  <input type="checkbox" checked name="blue" id="blue">
  <label for="blue" class="blue"></label>
  <input type="checkbox" checked name="green" id="green">
  <label for="green" class="green"></label>
  <input type="checkbox" checked name="pink" id="pink">
  <label for="pink" class="pink"></label>
  <input type="checkbox" checked name="red" id="red">
  <label for="red" class="red"></label>
  <div class="filter-items">
    <div class="green item"></div>
    <div class="red item"></div>
    <div class="green item"></div>
    <div class="pink item"></div>
    <div class="blue item"></div>
    <div class="red item"></div>
    <div class="green item"></div>
    <div class="pink item"></div>
    <div class="blue item"></div>
    <div class="blue item"></div>
    <div class="red item"></div>
    <div class="blue item"></div>
    <div class="red item"></div>
  </div>
</div>

推荐阅读