css 选择器问题

Question

.slides input[type='radio']:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3) {
  background-color: #333;
}

请问这段css该怎么理解？谢谢！

Answer 1

slides下第三个类型为radio的input 选中时 同级元素 controls-visible 下的第三个label 添加背景色

Answer 2

可以看下这个示例 点击第三个radio试试。

Answer 3

.slide {} // class选择器
input[type='radio'] // 属性选择器，选中type=radio的input元素
div:nth-of-type(n) // 伪类选择器，选中第 n 个div元素
:checked // 匹配每个已被选中的 radio 元素
p ~ ul // 通用兄弟选择器, 选择 p 元素 后同级的 ul 元素