HTML示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<h1>第一个标题</h1>
<div class="nav-2014">
<div class="w">
<div class="w-spacer"></div>
<div class="categorys">
<div class="dt">家用电器分类</div>
</div>
<span class="hr"></span>
<div class="navitems-2014">
<div id="treasure"></div>
<span class="clr"></span>
<span class="chr"></span>
男：<input type="checkbox" checked="checked" value="nan">
女:<input type="checkbox" value="nv">
</div>
</div>
</div>
<h2>第二个标题</h2>
<div id="electronic">
<div id="firstScreen">1
<div class="w">2</div>
</div>
<ul>
<div class="u_c" lang="en-us"></div>
<li class="ui-switch-curr"></li>
<li class="ui-switch-item"></li>
<li class="ui-switch-next"></li>
<li class="ui-switch-sub"></li>
</ul>
<div class="secord_screen"></div>
<div class="third_screen"></div>
</div>
</body>
</html>
伪类选择器：即以:开头的
:first 获取第一个元素
:not(selector) 去除所有选定的元素
:even 匹配索引为偶数的元素
:odd 匹配索引为奇数的元素
:eq(index) 匹配给定的索引
:gt(index) 大于指定的索引
:lt(index) 小于指定的索引
:last 匹配获取的最后一个元素
:header 匹配所有标题元素
示例：
<!--jquery区域-->
<script src="jquery-3.1.0.js"></script>
<script>
// 获取id为electronic下所有孩子div中的第一个,即id为firstScreen的div
$("#electronic > div:first")
// 获取所有li元素中最后一个元素
$("li:last")
// 获取所有input元素中非checked的元素,即女:<input type="checkbox" value="nv">
$("input:not(:checked)")
// 获取所有li元素中索引为0,2,4...的元素
$("li:even")
// 获取所有li元素中索引为1,3,5...的元素
$("li:odd")
// 获取所有li元素中索引为1的元素
$("li:eq(1)")
// 获取所有li元素中索引大于1的元素
$("li:gt(1)")
// 获取所有li元素中索引小于1的元素
$("li:lt(1)")
// 给所有标题加上背景色
$(":header").css("background","red")
console.log(cls)
</script>