html - 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 时更改它们的值。

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

(从右到左)

1. left 属性设置为 0
2. 这会影响 ul 元素
3. 此 ul 元素需要是 ID 为 slideshow-inner 的元素的直接子元素(> 是直接子选择器)
4. #slideshow-inner 需要出现在 ID 为 button-1 的元素之后的某处(#选择一个 ID，~ 是通用兄弟组合器)
5. #button-1元素的状态需要checked(冒号选择伪类)
6. #button-1 元素需要有一个值为 radio 的 type 属性(方括号选择属性，一个值可以通过使用 = 字符附加它来选择)
7. #button-1 元素需要是输入元素
8. #button-1 元素需要是 ID 为 #slideshow-wrap 的元素的子元素(使用空格意味着它可以是任何子元素，不仅是直系子女)