html - css : problems with checked property 上的自定义 slider

Question

我想在 CSS 上制作自定义 slider 。这是它的代码:

.slider input[type=radio] {
  display: none;
}

.slider__slider-controls {
  margin-bottom: 10px;
  text-align: center;
}

.slider__slider-controls label {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 16px;
  background-color: #bec2c7;
  border-radius: 50%;
  transition: background-color 0.2s;
  cursor: pointer;
}

.radio-slider__one:checked ~ .radio-slider-1 {
  border: 3px solid #000000;
  width: 6px;
  height: 6px;
  background-color: @white;
}

.radio-slider__two:checked ~ .radio-slider-2 {
  border: 3px solid #000000;
  width: 6px;
  height: 6px;
  background-color: @white;
}

.radio-slider__three:checked ~ .radio-slider-3 {
border: 3px solid #000000;
  width: 6px;
  height: 6px;
  background-color: @white;
}

<div class="slider">
          <input type="radio" id="radio-slider-1" class="radio-slider radio-slider__one" checked>
          <input type="radio" id="radio-slider-2" class="radio-slider radio-slider__two">
          <input type="radio" id="radio-slider-3" class="radio-slider radio-slider__three">
          <div class="slider__slider-controls">
            <label for="radio-slider-1" class="radio-slider-1"></label>
            <label for="radio-slider-2" class="radio-slider-2"></label>
            <label for="radio-slider-3" class="radio-slider-3"></label>
          </div>

如果我理解这个产权，它只会在 .radio-slider__one 处于选中状态时对 .radio-slider-1 进行操作。但它不起作用。我做错了什么？

Answer 1

这里发生了几件事。

.radio-slider__three:checked ~ .radio-slider-3 是说:

当选中 .radio-slider__three 时，找到类 .radio-slider-3 的兄弟并应用这些样式。在您的 html 中，.radio-slider-3 不是 sibling ，而是 sibling 的 child 。因此，要解决此问题，您应该将选择器更改为 .radio-slider__one:checked ~ .slider__slider-controls .radio-slider-1

接下来是您的 radio 元素没有 name 属性，因此当您“选中”一个元素时，您可以取消选中它，因为您没有选择其他选项。如果您为它们提供相同的名称属性(在我的示例中为 slider)，它们一次只会选择 1 个。

.slider input[type=radio] {
  display: none;
}

.slider__slider-controls {
  margin-bottom: 10px;
  text-align: center;
}

.slider__slider-controls label {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 16px;
  background-color: #bec2c7;
  border-radius: 50%;
  transition: background-color 0.2s;
  cursor: pointer;
}

.radio-slider__one:checked ~ .slider__slider-controls .radio-slider-1 {
  border: 3px solid #000000;
  width: 6px;
  height: 6px;
  background-color: white;
}

.radio-slider__two:checked ~ .slider__slider-controls .radio-slider-2 {
  border: 3px solid #000000;
  width: 6px;
  height: 6px;
  background-color: white;
}

.radio-slider__three:checked ~ .slider__slider-controls .radio-slider-3 {
border: 3px solid #000000;
  width: 6px;
  height: 6px;
  background-color: white;
}

<div class="slider">
          <input name="slider" type="radio" id="radio-slider-1" class="radio-slider radio-slider__one" checked>
          <input name="slider" type="radio" id="radio-slider-2" class="radio-slider radio-slider__two">
          <input name="slider" type="radio" id="radio-slider-3" class="radio-slider radio-slider__three">
          <div class="slider__slider-controls">
            <label for="radio-slider-1" class="radio-slider-1"></label>
            <label for="radio-slider-2" class="radio-slider-2"></label>
            <label for="radio-slider-3" class="radio-slider-3"></label>
          </div>

JSFiddle