Отладка тумблера css?
ребята, я сейчас изо всех сил пытаюсь понять код переключателя, я нашел это в 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);
}
Если бы переключатель был сделан потомком ввода, html не был бы действителен. Возможно, поэтому дизайнер структурировал его именно так.
Ответы 2
1. Переход на тумблер Это полностью зависит от человека, разрабатывающего сайт. Если код работает нормально и без него, вы можете удалить его, если вам не нравится такой внешний вид.
2. Почему соседний?
В этом случае использование соседнего комбинатора гарантирует, что только тот .input, который принадлежит .switch, будет затронут какими бы то ни было стилями. Это будет сделано в случае, если класс .input будет вызываться много раз на странице. Все остальные его экземпляры сохранят стили по умолчанию для этого класса, в то время как экземпляр в классе .switch будет иметь уникальные стили.
1. Объявление transition для .slider используется для перехода его свойства background-color, это тонкий эффект, который вы, возможно, не заметили.
2. Комбинатор потомков действительно не может работать в этом случае, поскольку диапазон .slider не является потомком флажка, а примыкает к нему. Другой селектор, который вы могли бы использовать в этом случае вместо этого, - это селектор ~ с аналогичным результатом.
Переход предназначен для анимации, как вы указали, он не нужен. Смежный комбинатор используется, потому что ползунок находится рядом со входом.