css数组选择 |网站导航css源代码

除了这些基本的选择器外，CSS还提供了数组选择器。数组选择器可以选择文档中的某些元素，根据元素在一个父元素下的位置进行选择。

数组选择器同样用于定位元素，只是其定位方式和基本选择器不同。

下面是几个常见的数组选择器：

nth-child(n)
nth-last-child(n)
nth-of-type(n)
nth-last-of-type(n)

其中，nth-child(n)选中的是元素在其父元素中的第n个子元素。

示例代码：
.parent div:nth-child(2){} /* 选中父元素为 .parent 的第二个 div 元素 */
.parent p:nth-child(odd){} /*选中父元素为 .parent 的奇数个 p 元素*/

而nth-last-child(n)选择的则是元素在其父元素中的倒数第n个子元素。

示例代码：
.parent span:nth-last-child(2){} /* 选中父元素为 .parent 的倒数第二个 span 元素 */

nth-of-type(n)选择的是同一种类型元素中的第n个元素。

示例代码：
.container >h2:nth-of-type(3){} /* 选中父元素为 .container 的第三个 h2 元素 */

而nth-last-of-type(n)选择的则是同一种类型元素中的倒数第n个元素。

示例代码：
.container >p:nth-last-of-type(1){} /* 选中父元素为 .container 的最后一个 p 元素 */

数组选择器的应用可以更加灵活地指定元素选择范围，是CSS选择器中的重要组成部分。