<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.7jQuery选择器之基本过滤选择器</title>
<script src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<script>
//返回所有li元素
$('li').css('margin','5px');
//返回第一个li元素
$('li:first').css('color','red');
//返回最后一个li元素
$('li:last').css('color','green');
//返回索引值是3的li元素
$('li:eq(3)').css('color','blue');
$('li:eq(3)').css('border','blue solid 2px');
//返回索引值小于3的li元素
$('li:lt(3)').css('border','red solid 2px');
//返回索引值大于3的li元素
$('li:gt(3)').css('border','green solid 2px');
//返回索引值为偶数的li元素
$('li:even').css('background-color','#999');
//返回索引值为奇数的li元素
$('li:odd').css('background-color','#CCC');
//：root根选择器，返回HTML
$(':root').css('border','double 2px red')
//:head选择器，选择h1~h6
$(':header').css('margin','2px');
$(':header').css('padding','2px');
$(':header').css('background-color','#ccc');
$(':header').css('border','#000 2px solid');
</script>
</body>
</html>
