HTML示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<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>
</div>
</div>
</div>
<div id="electronic">
<div id="firstScreen">
<div class="w"></div>
</div>
<ul>
<div class="u_c"></div>
<li class="ui-switch-curr"></li>
<li class="ui-switch-item"></li>
</ul>
<div class="secord_screen"></div>
<div class="third_screen"></div>
</div>
</body> </html>
1、ancestor descendant 祖先 子孙选择器，在给定的祖先元素下匹配所有的后代元素.
<script src="jquery-3.1.0.js"></script>
<script>
// 取类.nav-2014的子孙为span的元素,选择了类nav-2014下所有span子元素
$(".nav-2014 span")
</script>
运行结果：选择了类nav-2014下一个父sapn,二个孙span
2、parent > child:父子选择器，在给定的父元素下匹配所有的子元素。
<script>
// 取id为electronic的子元素为div的元素,选择了id为electronic下的二个子div（firstScreen，secord_screen）
$("#electronic > div")
</script>
3、prev + next :下一个选择器，在给定的前一个元素下匹配next 元素。
<script>
// 取ul的下一个元素为div的元素，取到紧跟form后平级的span元素,结果选择了类secord_screen
$("ul + div")
</script>
4、prev ~ siblings:在给定的前一个元素下之后的所有siblings 元素。
<script>
// 选择id为firstScreen后所有邻居中为div的元素
$("#firstScreen + div")
</script>