:nth-child(an+b)
这个CSS伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）
0n+3或简单的3匹配第三个元素。1n+0或简单的n匹配每个元素。2n+0或简单的2n匹配位置为 2、4、6、8…的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字even来替换此表达式。2n+1匹配位置为 1、3、5、7…的元素。你可以使用关键字odd来替换此表达式。3n+4匹配位置为 4、7、10、13…的元素。a和b都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an必须写在b的前面，不能写成b+an的形式。
例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Document</title><style>.parent p:nth-child(1){color: red;}.parent p:nth-child(2){color: blue;}.parent p:nth-child(3){color: green;}</style>
</head>
<body><div class="parent"><p>我是p1</p><p>我是p2</p><p>我是p3</p><p>我是p4</p><p>我是p5</p></div>
</body>
</html>
<style>/* 奇数 */.parent p:nth-child(2n+1){color: red;}/* 或 *//* .parent p:nth-child(odd){color: red;} */</style>
<body><div class="parent"><p>我是p1</p><p>我是p2</p><p>我是p3</p><p>我是p4</p><p>我是p5</p></div>
</body>
<style>/* 偶数 */.parent p:nth-child(2){color: blue;}/* 或 *//* .parent p:nth-child(even){color: blue;} */</style>
<body><div class="parent"><p>我是p1</p><p>我是p2</p><p>我是p3</p><p>我是p4</p><p>我是p5</p></div>
</body>
:nth-last-child()
这个css伪类从兄弟节点中从后往前匹配处于某些位置的元素。
注意: 这个伪类和 [
:nth-child] 基本一致, 但它是从**结尾**计数, 而不是从开始计数。
例：获取下面div元素的倒数第二个p
<style>/* 倒数第二个 */.parent p:nth-last-child(2){color: blue;}/* 或 *//* .parent p:nth-child(3){color: blue;} */</style>
<body><div class="parent"><p>我是p1</p><p>我是p2</p><p>我是p3</p><p>我是p4</p></div>
</body>
:first-child
表示在一组兄弟元素中的第一个元素。
最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。
<style>ul li:first-child{color:red;}
</style>
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
与之对应的是:last-child
除了CSS选择器外，我们还可以使用jQuery选择器：:eq()
- :eq(index) 选择器选取带有指定 index 值的元素。
- index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。上面的CSS选择器都是从1 开始的。
- index是可以为负数的，如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始。
- 它与
css选择器的区别是，:eq()每次只能选择一个元素。
// 首先要引入jQuery
// 类parent下的第一个p元素
$('.parent p:eq(0)')// 类parent下倒数第一个p元素
$('.parent p:eq(-1)')
