css3和幻灯片放映，有关语法的必要说明

Question

我试图找一段时间的幻灯片，我很高兴我发现了它。 但我正在寻找解释。有太多事情没有任何意义。特别是语法。 像这样的行

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

你可以在JSFIDDLE上找到这个网址

  http://jsfiddle.net/6ht9c2x0/

Answer 1

一般来说，这里发生的是隐藏的单选按钮用于管理幻灯片的状态。在许多情况下，人们使用JavaScript来实现这一目标。通过使用DOM树来存储当前状态，它在这里得到了很好的解决。

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

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

（从右到左）

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