HTML和CSS误解了

Question

我希望有人向我解释班级active-slide的工作原理。

代码：

<div class="slider">
<div class="slide active-slide">..</div>
<div class = "slide slide-feature">..</div>
<div class = "slide">..</div>
<div class = "slide">..</div>

并且css中的课程slide获得了 display:none 属性，但它根本没有效果。

<div class="slide active-slide">..</div> 

Answer 1

如果只有display: none类，则所有幻灯片似乎都是slide。 active-slide班级有display:block（或inline-block，或none以外的其他内容。这取代了display:none。

.slide {
    display: none; // says anything with class of .slide does not display
}
.slide.active-slide {
    display: block; // says override the display property for items with class of .slide and .active-slide
}

Answer 2

this.Controls课程设置了this.Controls的特定幻灯片，使其对用户可见。

最初，所有幻灯片都设置为active-slide，因此它们不显示。只显示display: block;类的幻灯片。