复杂 CSS 选择器解析：层层深入解读！
你在示例中提供的 CSS 选择器是一个颇为复杂的查询，它包含了多个子选择器和组合器。为了帮助你理解它，让我们逐一拆解其各个部分：
- .slides：它是一个类选择器，匹配所有带 slides 类名的元素。在这段代码中，它应用于整个幻灯片容器。
- input[type='radio']：它是一个属性选择器，匹配所有类型为 radio 的 input 元素。这项选择将缩小范围，仅关注幻灯片中的 radio 按钮。
- :nth-of-type(3)：它是一个伪类，匹配其同类元素中的第三个。在这个例子中，它将进一步缩小范围到第三个 radio 按钮。
- :checked：另一个伪类，用于匹配选中的 radio 按钮。当第三个 radio 按钮被选中时，此伪类便生效。
- ~：它是一个邻接组合器，用于匹配与前一个选择器匹配的元素相邻的元素。
- .controls-visible：它是一个类选择器，用于匹配具有 controls-visible 类的元素。它指的是 radio 按钮旁边的控件。
- label:nth-of-type(3)：这是一个子选择器，匹配控件中的第三个标签元素。
组合所有这些选择器，它意味着：当幻灯片中的第三个 radio 按钮被选中时，与该 radio 按钮相邻的 controls-visible 元素中的第三个标签将获得背景色 #333。