以css 匹配第 n 个孙子为主题的介绍

什么是CSS选择器？

在HTML和XML文档中，CSS选择器用于选择需要样式化的元素。CSS选择器基于元素的ID、类、类型、属性、位置或其它特征来匹配。

如何匹配第n个孙子？

要匹配第n个孙子，可以使用 CSS3 中的伪类 :nth-child() 或 :nth-of-type()，其中 :nth-child(n) 选择其父元素下的第n个子元素，而 :nth-of-type(n) 则选择以指定类型定义（即相同标记名称）的第n个子元素。

例如，要选择第二个 span 元素的祖先元素，可以使用以下情况：

span:nth-of-type(2) {
  /* 样式 */
}

要选择第三个 li 元素的祖先元素，可以使用以下情况：

li:nth-child(3) {
  /* 样式 */
}

示例代码

<ul>
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  <li>
    <span>3</span>
  </li>
</ul>

li:nth-child(2) {
  background-color: yellow;
}

span:nth-of-type(2) {
  color: red;
}

总结

使用 :nth-child() 或 :nth-of-type() 伪类可以很方便地选择文档中的特定元素，而不必借助于JavaScript或其它复杂的技术。此外，这些伪类还可以与其它选择器组合使用以创建更复杂的选择。