<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.14jQuery子元素过滤选择器补充</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//$('p:first').css('background-color','#ccc');
//body的第一P
//$('p:first-child').css('background-color','#CCC');
//body的第一P 第一个DIV中的第一个P
//$('p:first-of-type').css('background-color','#CCC');
//:first-child 先筛选父元素下的第一个元素，之后再进行匹配
//:first-of-type先筛选元素，之后再找第一个
//:last-of-type
//$('p:last-of-type').css('background-color','#F99');
//:nth-of-type(index/odd/even/express)
//$('p:nth-of-type(2)').css('background-color','#FF6');
//:nth-of-type(3n) :nth-of-type(3n+1) :nth-of-type(3n+2)
//$('p:nth-of-type(3n)').css('border','solid 2px blue');
//$('p:nth-of-type(3n+1)').css('border','solid 2px green');
//$('p:nth-of-type(3n+2)').css('border','solid 2px red');
//:nth-last-of-type(2)
//$('p:nth-last-of-type(2)').css('color','red');
//练习:设置h2的字体大小和字体颜色
//$('h2:nth-of-type(odd)').css('font-size','20px');
//$('h2:nth-of-type(odd)').css('color','red');
//$('h2:nth-of-type(even)').css('font-size','24px');
//$('h2:nth-of-type(even)').css('color','blue');
//$('p:nth-child(3)').css('color','blue');
//$('p:nth-child(even)').css('color','blue');
//$('p:nth-of-type(2)').css('color','blue');
});
</script>
</head>
<body>
<p>body的第一P</p>
<div id="one">
<p>第一个DIV中的第一个P</p>
<p>第一个DIV中的第二个P</p>
<p>第一个DIV中的第三个P</p>
</div>
<div id="two">
<h2>第二个DIV中的第一个h2</h2>
<h2>第二个DIV中的第二个h2</h2>
<p>第二个DIV中的第一个P</p>
<p>第二个DIV中的第二个P</p>
<p>第二个DIV中的第三个P</p>
</div>
<p>body的第二P</p>
<p>body的第三P</p>
</body>
</html>
