位置伪类选择器，指的是根据页面中的位置来选取元素。在jQuery中，常见的位置伪类选择器如下表所示。
| 选择器 | 说明 |
|---|---|
| :first | 选取某种元素的第一个 |
| :last | 选取某种元素的最后一个 |
| :odd | 选取某种元素中序号为“奇数”的所有元素，序号从0开始 |
| :even | 选取某种元素中序号为“偶数”的所有元素，序号从0开始 |
| :eq(n) | 选取某种元素的第n个，n是一个整数，从0开始 |
| :lt(n) | 选取某种元素中小于n的所有元素，n是一个整数，从0开始 |
| :gt(n) | 选取某种元素中大于n的所有元素，n是一个整数，从0开始 |
举例：:first、:last
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li:first,li:last").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
浏览器预览效果如图所示。
分析：
$("li:first,li:last")
上面这行代码表示选择第一个li元素和最后一个li元素。
举例：:odd、:even
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li:odd").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
浏览器预览效果如图所示。
分析：
$("li:odd")表示选择序号为奇数的li元素。这里要注意一下，序号是从0开始，而不是从1开始的。也就是说“第1个选项”的li元素序号为0，“第2个选项”的li元素序号为1，以此类推。这个跟数组下标是一样的道理。
举例：:eq(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li:eq(3)").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
浏览器预览效果如图所示。
分析：
$("li:eq(3)")表示选取序号为3的li元素，也就是第4个li元素，因为序号是从0开始的。
举例：lt(n)、gt(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li:lt(3)").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
浏览器预览效果如图所示。
分析：
$("li:lt(3)")表示选取序号小于3的所有li元素，序号是从0开始的。此外，lt表示“less than”，gt表示“greater than”，了解这两个方法的英文意思可以让我们更好地理解和记忆。
