Question

伙计们，这些天我在努力理解拨码开关代码，这是我在Google上发现的，我正在尝试理解代码以增强我的CSS技能请帮助我，谢谢你。

1。为什么在切换切换器没有它的情况下此人可以放置转换声明？

2。为什么我们应该使用相邻的组合器，而不要使用任何其他组合器？我尝试了后代组合器，但不起作用，我想知道为什么吗？

这是HTML代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test.css">
    <title></title>
  </head>
  <body>
    <label class="switch">
  <input type="checkbox" class="input">
  <span class="slider"></span>
</label>
  </body>
</html>

这是CSS：

    .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch .input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
 -webkit-transition: .4s; 
  transition: .4s;*/
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
   **i understand that here it's necessary for the cool effect of the transition but above i don't see why we used it?** 

-webkit-transition: .4s; 
      transition: .4s;
    }
.input:checked + .slider {

  background-color: #2196F3;
}

.input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.input:checked + .slider:before {
  transform: translateX(26px);
}

Answer 1

1。切换上的过渡 这完全取决于设计网站的人员。如果没有它，代码可以正常工作，那么如果外观不吸引您，则可以将其删除。

2。为什么相邻？ 在这种情况下，使用相邻的组合器可确保只有属于.input的{{1}}会受到声明的任何样式的影响。如果在整个页面中将多次调用.switch类，则可以这样做。其他实例将保留该类的默认样式，而.input类中的样式将具有唯一样式。

Answer 2

1。。transition的{{1}}声明用于转换其.slider属性，这是您可能没有注意到的微妙效果。

2。。在这种情况下，后代组合器实际上无法工作，因为background-color跨度不是复选框的后代，而是与其相邻。在这种情况下，您可以使用的另一个选择器是同级.slider选择器，其结果类似。

调试拨动开关CSS？

2 个答案: