css - 不知道幻灯片数量的 CSS3 幻灯片

Question

自. CSS3_ CSS3_ JavaScript基于 - 的幻灯片有几个示例CSS3，但总是缺少一件事：

创建幻灯片的常用方法CSS3是为每张幻灯片引入排序延迟。因此，我们需要知道幻灯片的数量并CSS为每个相应的元素添加规则。

我很好奇是否有另一种方法可以在CSS3没有元素数量的情况下循环幻灯片？

Answer 1

使用starts-with选择器来避免每个对应元素的规则：

section[id^=slide]:target {
opacity: 1;
z-index: 1;
-moz-transform: translate(0, 0);
}

section[id^=slide]:target ~ section[id^=slide] {
-moz-transform: translate(110%, 0);
}

参考：

• 纯 CSS 幻灯片