怎样用CSS创建数据筛选按钮—toggle切换样式

<div class="filter-controls">
  <input type="checkbox" id="toggleCategoryA" class="filter-toggle-input" hidden>
  <label for="toggleCategoryA" class="filter-toggle-button">
    <span class="toggle-label-text">显示所有</span>
    <span class="toggle-slider"></span>
  </label>

  <input type="checkbox" id="toggleCategoryB" class="filter-toggle-input" hidden>
  <label for="toggleCategoryB" class="filter-toggle-button">
    <span class="toggle-label-text">仅显示技术</span>
    <span class="toggle-slider"></span>
  </label>
</div>

<div class="content-items">
  <div class="item category-tech">这是一篇关于前端技术的文章。</div>
  <div class="item category-life">这是一篇关于生活分享的文章。</div>
  <div class="item category-tech">这是一篇关于后端开发的文章。</div>
  <div class="item category-life">这是一篇关于旅行见闻的文章。</div>
</div>

/* 隐藏实际的checkbox输入框 */
.filter-toggle-input {
  display: none; /* 或者 opacity: 0; position: absolute; */
}

/* 筛选按钮的基础样式 */
.filter-toggle-button {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 120px; /* 按钮宽度 */
  height: 36px; /* 按钮高度 */
  background-color: #ccc;
  border-radius: 18px; /* 圆角 */
  cursor: pointer;
  overflow: hidden;
  margin: 10px;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 按钮内部的文本 */
.filter-toggle-button .toggle-label-text {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #fff;
  z-index: 1;
  line-height: 36px; /* 垂直居中 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 滑块的样式 */
.filter-toggle-button .toggle-slider {
  position: absolute;
  width: 50%; /* 滑块宽度为按钮的一半 */
  height: 100%;
  background-color: #2196F3; /* 激活时的颜色 */
  border-radius: 18px;
  left: 0;
  transition: transform 0.3s ease;
  z-index: 0;
}

/* 当checkbox被选中时，改变按钮背景色和滑块位置 */
.filter-toggle-input:checked + .filter-toggle-button {
  background-color: #66bb6a; /* 选中时的背景色 */
}

.filter-toggle-input:checked + .filter-toggle-button .toggle-slider {
  transform: translateX(100%); /* 滑块移动到右侧 */
  background-color: #4CAF50; /* 滑块激活色 */
}

/* 文本在选中和未选中状态下的显示/隐藏 */
/* 假设默认显示“显示所有”，选中后显示“仅显示技术” */
#toggleCategoryA:not(:checked) + .filter-toggle-button .toggle-label-text {
    transform: translateX(0); /* 默认位置 */
}
#toggleCategoryA:checked + .filter-toggle-button .toggle-label-text {
    transform: translateX(-100%); /* 隐藏默认文本 */
    opacity: 0;
}
#toggleCategoryB:not(:checked) + .filter-toggle-button .toggle-label-text {
    transform: translateX(0);
}
#toggleCategoryB:checked + .filter-toggle-button .toggle-label-text {
    transform: translateX(-100%);
    opacity: 0;
}


/* 筛选逻辑：当特定toggle被选中时，隐藏对应的内容 */
.content-items .item {
  display: block; /* 默认显示 */
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid #eee;
  background-color: #fcfcfc;
  transition: all 0.3s ease;
}

/* 示例1：当“显示所有”按钮被激活时（也就是它没被选中时），所有内容都显示 */
/* 实际上，这个按钮是用来“隐藏”非技术内容的，所以它的逻辑是：
   如果toggleCategoryB（仅显示技术）被选中，那么非技术类（category-life）就隐藏 */
#toggleCategoryB:checked ~ .content-items .category-life {
  display: none; /* 隐藏非技术类内容 */
}

/* 示例2：如果需要一个按钮来专门隐藏技术类内容，可以这样设置 */
/* 假设toggleCategoryA用来隐藏技术内容 */
#toggleCategoryA:checked ~ .content-items .category-tech {
  display: none; /* 隐藏技术类内容 */
}

/* 当“只显示技术”的checkbox被选中时，隐藏所有带有category-life类的元素 */
#toggleShowTech:checked ~ .content-items .category-life {
  display: none;
}

/* 同时，确保技术类内容是显示的（虽然默认就是显示，但显式写出来更清晰） */
#toggleShowTech:checked ~ .content-items .category-tech {
  display: block; /* 或者你原有的display值 */
}