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);
}

参考文献：

• Pure CSS Slides