<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.13jQuery选择器之子元素过滤选择器</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//:first,获取第一个元素
//$('li:first').css('color','red');
//:first-child，获取父集下的第一个元素，返回的是集合
$('li:first-child').css('background-color','#CCC');
//:last-child，获取父集下的最后一个元素，返回的是集合
$('li:last-child').css('border','solid 2px green');
//:only-child,获取父集下的唯一元素，返回是集合
$('li:only-child').css('text-align','center');
//:nth-child(index/odd/enen/express)
//index取值从1开始
//odd索引值是奇数的元素，even索引值是偶数的元素
//express = an+b;a是周期，n是计数器，b是偏移量
//3n+0,3n+1,3n+2
$('li:nth-child(3)').css('color','blue');
//:nth-child(even),获取父集下索引值是偶数的元素
$('li:nth-child(even)').css('background-color','#FC9');
//:nth-child(3n)
$('li:nth-child(3n)').css('border','solid 2px red');
//:nth-child(3n+2)
$('li:nth-child(3n+2)').css('border','solid 2px blue');
//:nth-last-child(3),获取父集下倒数第3个元素
$('li:nth-last-child(3)').css('border','solid 2px green');
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>七</li>
<li>八</li>
<li>九</li>
</ul>
<ul>
<li>one</li>
</ul>
</body>
</html>
