我正在尝试制作一个图像滑块。所以我做了两个按钮来切换到下一张图像。问题是图像切换按钮没有到位。 css :first-child 选择器有效，但最后一个子选择器无效。我不知道为什么会这样。
我尝试了最后一种类型，它开始工作。但我仍然不知道为什么最后一个孩子不工作有人可以向我解释一下吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Slider</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: url("http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg")
no-repeat center center / cover;
width: 100%;
height: 100vh;
transition: 0.3s all linear;
position: relative;
}
.btn {
position: absolute;
font-size: 5rem;
padding: 0 1rem;
border: 0.1rem solid blue;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
outline: 0.3rem solid #0000ff4a;
top: 50%;
transform: translateY(-50%);
&:first-child {
left: 0%;
}
&:last-child {
right: 0%;
}
}
</style>
</head>
<body>
<button class="btn"><</button>
<button class="btn">></button>
</body>
</html>使用
:first-of-typelast-of-type<>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: url("http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg") no-repeat center center / cover;
width: 100%;
height: 100vh;
transition: 0.3s all linear;
position: relative;
}
.btn {
position: absolute;
font-size: 5rem;
padding: 0 1rem;
border: 0.1rem solid blue;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
outline: 0.3rem solid #0000ff4a;
top: 50%;
transform: translateY(-50%);
}
.btn:first-of-type {
left: 0;
}
.btn:last-of-type {
right: 0;
}<body>
<button class="btn"><</button>
<button class="btn">></button>
</body>