不知道幻燈片數量的CSS3幻燈片

Question

自從CSS3的發展以來，越來越多的嘗試僅基於CSS3創建基於瀏覽器的效果（轉換和動畫），而不使用JavaScript。有幾個基於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