css 选择器难题解析

css 中存在各种选择器，它们提供强大的方式来为页面元素指定样式。在这个示例中，我们遇到一个复杂的 css 选择器：

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

让我们逐个分解这个选择器：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• .slides 选择器选择具有 class="slides" 的元素。
• input[type='radio'] 选择器选择 type="radio" 的所有 input 元素。
• :nth-of-type(3) 伪类选择器选择父元素中第三个 input[type='radio'] 元素。
• :checked 伪类选择器选择被选中的元素。
• ~ 邻接兄弟选择器选择具有同级 class="controls-visible" 的元素。
• label:nth-of-type(3) 选择器选择父元素中第三个 label 元素。

因此，当具有 class="slides" 的元素下的第三个 input[type='radio'] 被选中时，同级元素 class="controls-visible" 中的第三个 label 会被选中并添加 background-color: #333; 样式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！