css3 和幻灯片放映，需要对语法进行解释

Question

一段时间以来，我一直在努力寻找幻灯片放映，很高兴找到了它。但我正在寻找解释。有那么多没有任何意义的事情。特别是语法。像这样的行

 #slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

你可以在 JSFIDDLE 上找到它 URL 就是这个

  http://jsfiddle.net/6ht9c2x0/

Answer 1

一般来说，这里发生的是隐藏的单选按钮用于管理幻灯片的状态。在许多情况下，人们使用 JavaScript 来完成此操作。这里通过使用 DOM 树来存储当前状态非常优雅地解决了。

您可能已经注意到单选按钮甚至不可见。这是有充分理由的，因为它们不能使用 CSS 自由换肤。这就是使用 for 属性将它们映射到 label 的原因。这使得单选按钮在单击相应的 label 时更改它们的值。

关于你引用的那一行，这里有一个详细的解释：

(从右到左)

left 属性设置为0
这会影响 ul 个元素
此 ul 元素需要是 ID 为 slideshow-inner 的元素的直接子元素（> 是直接子元素 select 或）
#slideshow-inner 需要出现在之后具有 ID button-1 的元素（# select 是一个 ID， ~ 是通用兄弟组合器)
#button-1元素的状态需要是checked（冒号select是伪class）
#button-1元素需要有一个type属性，值为radio（方括号select属性，取值可以是select 通过使用 = 字符附加它)
#button-1 元素需要是输入元素
#button-1 元素需要是 ID 为 #slideshow-wrap 的元素的子元素（使用 space 意味着它可以是任何子元素，而不仅仅是直接子元素）

css3 and slide show, required explanation about the syntax