CSS选择器-nth-child&nth-last-child

在CSS中，nth-child(n)和nth-last-child(n)是针对一组兄弟节点的标签进行筛选的伪类。使用n值可以精确地指定在一组兄弟节点中的位置，如以下代码所示。

运行代码后，我们得到以下效果：

在case-1中，我们筛选出第一子节点。

case-2展示了如何选择第二子节点。

case-3和case-4分别展示了使用n取值从0到无穷大，元素检索的下标从1开始的原理。

case-5进一步展示了如何根据n值筛选特定位置的子节点。

在case-6中，我们利用nth-last-child(n)选择最后一个子节点。

最后，case-7展示了如何选择倒数第二个子节点，通过n值的应用，我们可以灵活地控制CSS中的元素显示与样式，使网页布局更加灵活多变。2024-08-13