Question

我想在css上制作自定义滑块。这是它的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果我理解了这个属性，只有当.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不是兄弟姐妹，而是兄弟姐妹的孩子。因此，要解决此问题，您应该将选择器更改为.radio-slider__one:checked ~ .slider__slider-controls .radio-slider-1

接下来就是你的无线电元素没有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

Answer 2

~选择器的HTML结构错误。对于A ~ B，它会在B之后找到相同当前级别的A个匹配项，而不是后代。

将标签从<div>中拉出来，或者在~之后添加div，使其成为“跟随兄弟”选择的一部分。

.radio-slider__one:checked ~ .slider__slider-controls > .radio-slider-1

css上的自定义滑块：已检查属性的问题

2 个答案: