如何修改复选框选中时其左侧span元素的透明度？

首先得说个小前提：CSS目前没有前置兄弟选择器（没法直接选中当前元素之前的同级元素），所以咱们得稍微调整下HTML结构，把复选框放到左侧span的前面，再用Flex布局保持原来的视觉顺序，这样就能用CSS轻松控制啦。

修改后的HTML结构 #

<div class="toggle_div">
  <input type="checkbox" id="switch_trail" />
  <span class="toggle_left">NO</span> <!-- 现在复选框在它前面，能被选中状态控制了 -->
  <label for="switch_trail"></label>
  <span class="toggle_right">SI</span>
</div>

对应的SCSS代码 #

// 先给父容器设置Flex，调整元素视觉顺序
.toggle_div {
  display: flex;
  align-items: center;
  
  // 用order属性调整元素显示位置，让span回到左边
  #switch_trail {
    order: 1;
  }
  .toggle_left {
    order: 2;
    opacity: 1; // 默认不透明
    transition: opacity 0.3s ease; // 加过渡动画让切换更丝滑
  }
  label {
    order: 3;
    // 自定义开关样式（可根据你的需求调整）
    width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    margin: 0 8px;
    position: relative;
    cursor: pointer;
    
    &::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      background: white;
      border-radius: 50%;
      transition: left 0.3s ease;
    }
  }
  .toggle_right {
    order: 4;
  }

  // 核心逻辑：复选框选中时修改左侧span透明度
  #switch_trail:checked ~ .toggle_left {
    opacity: 0.5; // 这里可以改成你想要的透明度值，比如0.2是几乎透明
  }

  // 顺便给开关添加选中状态样式，让交互更完整
  #switch_trail:checked ~ label {
    background: #4CAF50;
    &::after {
      left: 22px;
    }
  }
}

// 隐藏原生复选框，只显示自定义开关
#switch_trail {
  display: none;
}

关键知识点解释 #

• Flex的order属性：不用改动HTML实际结构，就能调整元素的视觉显示顺序，完美解决了CSS不能选前置元素的问题。
• 兄弟选择器~：当复选框被:checked选中时，选择它后面的.toggle_left元素，直接修改透明度。
• 过渡动画：给opacity和开关滑块添加transition，让状态切换的过程更流畅自然。

如果实在不想调整HTML结构，也可以用JavaScript实现：

const checkbox = document.getElementById('switch_trail');
const leftSpan = document.querySelector('.toggle_left');

checkbox.addEventListener('change', function() {
  leftSpan.style.opacity = this.checked ? '0.5' : '1';
});

不过还是推荐CSS方案，更简洁高效~

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