纯CSS多项目轮播：如何用input:checked和nth选择器实现向左导航

你的核心问题是误用了相邻兄弟选择器+——它只能选中当前元素直接相邻的下一个同级元素，无法跨越中间的.item容器定位到导航label；同时nth-of-type的计数逻辑没有结合DOM结构设计，导致无法选中目标范围的label。

解决方案 #

要实现选中第n个input时显示对应范围的label，需要：

• 用**通用兄弟选择器~**跨越中间元素，选中导航容器.nav；
• 针对每个input的选中状态，用nth-of-type精准匹配需要显示的label；
• 先默认隐藏所有label，再根据选中状态显示目标组。

假设DOM结构如下（确保input和.nav为同级元素）

<div class="carousel">
  <input type="radio" name="slide" id="slide1" checked>
  <input type="radio" name="slide" id="slide2">
  <input type="radio" name="slide" id="slide3">
  <input type="radio" name="slide" id="slide4">
  <input type="radio" name="slide" id="slide5">

  <!-- 轮播项容器 -->
  <div class="items">
    <div class="item">轮播项1</div>
    <div class="item">轮播项2</div>
    <div class="item">轮播项3</div>
    <div class="item">轮播项4</div>
    <div class="item">轮播项5</div>
  </div>

  <!-- 导航label容器 -->
  <div class="nav">
    <label for="slide1">1</label>
    <label for="slide2">2</label>
    <label for="slide3">3</label>
    <label for="slide4">4</label>
    <label for="slide5">5</label>
  </div>
</div>

对应CSS代码

/* 默认隐藏所有导航label */
.nav label {
  display: none;
  padding: 4px 8px;
  margin: 0 4px;
  cursor: pointer;
}

/* 选中第1个input时，显示label1、2 */
input:nth-of-type(1):checked ~ .nav label:nth-of-type(1),
input:nth-of-type(1):checked ~ .nav label:nth-of-type(2) {
  display: inline-block;
}

/* 选中第2个input时，显示label1、2、3 */
input:nth-of-type(2):checked ~ .nav label:nth-of-type(1),
input:nth-of-type(2):checked ~ .nav label:nth-of-type(2),
input:nth-of-type(2):checked ~ .nav label:nth-of-type(3) {
  display: inline-block;
}

/* 选中第3个input时，显示label2、3、4（你的需求场景） */
input:nth-of-type(3):checked ~ .nav label:nth-of-type(2),
input:nth-of-type(3):checked ~ .nav label:nth-of-type(3),
input:nth-of-type(3):checked ~ .nav label:nth-of-type(4) {
  display: inline-block;
}

/* 选中第4个input时，显示label3、4、5 */
input:nth-of-type(4):checked ~ .nav label:nth-of-type(3),
input:nth-of-type(4):checked ~ .nav label:nth-of-type(4),
input:nth-of-type(4):checked ~ .nav label:nth-of-type(5) {
  display: inline-block;
}

/* 选中第5个input时，显示label4、5 */
input:nth-of-type(5):checked ~ .nav label:nth-of-type(4),
input:nth-of-type(5):checked ~ .nav label:nth-of-type(5) {
  display: inline-block;
}

/* 高亮当前选中的label */
#slide1:checked ~ .nav label[for="slide1"],
#slide2:checked ~ .nav label[for="slide2"],
#slide3:checked ~ .nav label[for="slide3"],
#slide4:checked ~ .nav label[for="slide4"],
#slide5:checked ~ .nav label[for="slide5"] {
  background-color: #165DFF;
  color: #fff;
  border-radius: 4px;
}

如果轮播项数量更多，可按照此逻辑扩展对应的选择器规则。

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