<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
margin:0%;
Padding:0%;
}
.wrap{
height:100%;
width:100%;
position:relative;
overflow:hidden;
background:#120103;
color:#fff;
text-align:center;
}
header{
background:#3E474F;
box-shadow:0 .5em 1em #111;
position:absolute;
z-index:900;
width:100%;
}
header label{
color:#788188;
cursor:pointer;
display:inline-block;
line-height:4.25em;
font-size:.667em;
font-weight:bold;
padding:0 1em;
}
header label:hover{
background:#2e353b;
}
.slide{
width:100%;
height:100%;
position:absolute;
top:0%;
left:100%;
z-index:10;
padding:8em 1em 0;
background-color:#120103;
background-position:50% 50%;
background-size:cover;
transition:left 0s .75s;
}
[id^= "slide"]:checked + .slide{
left:0;
z-index:100;
transition:left .65s ease-out;
}
img{
height:250px;
width:250px;
Margin:20px;
Overflow:none;
display:block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.slide-one:hover .overlay{
opacity:0.5;
}
.slide-two:hover .overlay{
opacity:0.5;
}
.slide-three:hover .overlay{
opacity:0.5;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-one{
background-image:url('wow.jpg');
}
.slide-two{
background-image:url('Anonymous.jpg ');
}
.slide-three{
background-image:url('1.jpg');
}
</style>
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
</header>
<input id="slide-1-trigger" type="radio" name="slide" checked>
<section class="slide slide-one">
<div class="overlay">
<div class="text">Ethical Hacking is licensed hacking.... <a
href="https://en.wikipedia.org/wiki/Certified_Ethical_Hacker">Read More</a>
</div>
</div>
</section>
<input id="slide-2-trigger" type="radio" name="slide" >
<section class="slide slide-two" >
<div class='overlay'>
<div class="text">A rather famous group of hackers and tech savvys spread
across the world....<a
href="https://en.wikipedia.org/wiki/Anonymous_(group)">Read More</a></div>
</div>
</section>
<input id="slide-3-trigger" type="radio" name="slide" >
<section class="slide slide-three" >
<div class='overlay'>
<div class="text">Just Checking</div>
</div>
</div>
</body>
</html>
大家好，在看完整个视频后，我正在观看一个关于制作 CSS 图像 slider 的视频，我写了上面的代码，但在理解这段特定代码时遇到了一些问题:
[id^= "slide"]:checked + .slide{
left:0;
z-index:100;
transition:left .65s ease-out;
}
我需要帮助来理解这部分代码。提前感谢您的帮助:)
最佳答案
首先，您似乎了解 CSS 的基本原理，但如果我错了而您不了解，我推荐 MDN 关于 How CSS works 的教程。和 Syntax .
所以一点一点...
1。 [id^= "slide"]:checked + .slide
这是选择器，由两个主要部分组成:[id^= "slide"]:checked和 .slide , 通过 + 连接符号。我假设你知道什么 .slide指的是自己。如果没有，您应该阅读我上面发布的文章。
1.1。 +
+运算符 x + y语法选择将由纯 y 选择的所有元素但它将选择限制为仅那些直接跟随由 x 选择的其他元素的元素。 .所以如果你有 .a + .b然后你得到类为b的所有元素紧跟类 a 的元素:
div {
border: 1px dashed black;
padding: 1em;
margin: 1em;
}
.wupwupwup + .nanana {
background: red;
}This selects all .nanana directly after .wupwupwup.
<div class="nanana wupwupwup">This is not selected because there is no .wupwupwup before.</div>
<div class="wupwupwup">This is not selected because it has no .nanana class</div>
<div class="nanana">This is selected because it has .wupwupwup before and itself matches .nanana</div>
<div>This is not selected because it does not match .nanana and also because the previous element does not match .wupwupwup</div>1.2。 [id^="slide"]:checked
这个同样由两个选择器组成:[id^="slide"]和 :checked . :checked解释非常简单:x:checked选择所有匹配 x 的元素只要他们被“检查”。一个元素被“选中”，例如，如果它是一个复选框或单选按钮并且被选中。所以我们现在需要检查 x在这种情况下 [id^="slide"] .这是一个选择器，它选择所有具有属性 id 的元素。以 slide 开头.因此它会选择所有 ID 为 slide 的元素, slide-1-trigger , slide-2-trigger , slider , 等等。
那么整[id^= "slide"]:checked + .slide does 可以这样解释:它选择类为 slide 的所有元素直接跟在 ID 以 slide 开头的“checked”元素之后.
在你的情况下......
... 这意味着，例如元素 <section class="slide slide-one">检查后<input id="slide-1-trigger" type="radio" name="slide" checked>将被选中。
2。规则
{
left:0;
z-index:100;
transition:left .65s ease-out;
}
首先:您可以 read about transitions在 MDN 上。
您的转换基本上所做的是:更改属性 left到值 0光滑 0.65秒。在执行此操作时，它巧妙地使用了一个名为 ease-out 的特殊缓动函数。但是您可以忽略它而没有明显的差异。 z-index的 100使当前幻灯片位于最顶层，这样它就不会隐藏在其他幻灯片后面。
另一件事...
...您可能错过了:<label ...>您使用的元素将标记相应的 <input ...>元素为 checked如果你点击标签。这就是为什么他们的状态发生变化然后 :checked 的原因。选择器生效。
关于html - 纯 CSS 图像 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43819928/