我尝试过对输入进行z索引，但不起作用。我该如何解决这个问题，请检查一下。我的另一个问题是我的错误为什么当选中单选按钮时，图像不会从容器中滑出？
请解决我的困惑
body {
font-family: sans-serif;
}
.img-container {
width: 1550px;
border: 4px solid black;
padding: 6px;
}
.crousel {
width: 516px;
border: 6px solid magenta;
height: 350px;
display: flex;
}
img {
padding: 6px;
}
.toggle-button {
display: none;
}
.box {
transition-duration: 1s;
transition-property: transform;
transition-timing-function: ease-in-out;
}
.toggle-button:nth-child(1):checked ~ .box:nth-child(1) {
transform: translateX(0);
}
.toggle-button:nth-child(2):checked ~ .box:nth-child(2) {
transform: translateX(-100%);
}
.toggle-button:nth-child(2):checked ~ .box:nth-child(2){
transform: translateX(-200%);
}
input {
z-index: 100;
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div class="img-container">
<div class="crousel">
<input type="radio" name="button" id="toggle1" class="toggle-button" />
<input type="radio" name="button" id="toggle2" class="toggle-button" />
<input type="radio" name="button" id="toggle3" class="toggle-button" />
<img
src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg"
alt=""
class="box"
/>
<img
src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg"
alt=""
class="box"
/>
<img
src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg"
alt=""
class="box"
/>
</div>
</div>
<div class="buttons">
<label for="toggle1">1</label>
<label for="toggle2">2</label>
<label for="toggle3">3</label>
</div>
</body>
</html>uh我不知道你想做什么，但我做到了。由于某种原因，nth-child(1)不能为box工作，所以我给它box-1box-2box-3类，现在它可以工作了。lmk如果它帮助你
.toggle-button:nth-child(1):checked ~ .box-1 {
transform: translateX(0);
}
.toggle-button:nth-child(2):checked ~ .box-2 {
transform: translateX(-100%);
}
.toggle-button:nth-child(2):checked ~ .box-3{
transform: translateX(-200%);
}<img src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg" alt="" class="box box-1"/>
<img src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg" alt="" class="box box-2"/>
<img src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg" alt="" class="box box-3"/>您已将toggle-button的显示属性设置为none。简单地用block替换none
.toggle-button {
display: block;
}