<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
/*
* 层次选择器 (后代元素, 子元素, 相邻元素, 兄弟元素)(这是分为一个大类)
*
* : (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素;
* 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
*/
//1、后代选择器
//选中#fd标签中全部p标签，即一个子代p标签和一个孙代p标签,祖先选择器与后代选择器之间用空格分隔开
$("#myid p").css("color","red");
//2、 子代选择器
//只选中#fd标签中子代p标签，孙代p标签不选中,父选择器与子选择器之间用大于号分隔开
$("#myid>p").css("color","darkred");
//3、next选择器-示例
//只选中p标签中相邻的div标签,中间不能相隔其它标签，只能选中一个
$("p + span").css("color","aqua");
//4、sibling选择器
//只选中p标签中后的兄弟标签,中间可以相隔其它标签,可以选中多个
$("#span1~span").css("color","blueviolet");
});
</script>
<hr style="border:5px solid red"/>
<div id="myid" title="myid">
<h2>子h2标签</h2>
<p>子p标签</p>
<span id="span1">子span标签</span>
<span id="span2">子span标签2</span>
<div>子div标签
<hr style="border:2px solid pink"/>
<p>子子p标签</p>
</div>
<span>子span标签</span>
<span>子span标签</span>
<span>子span标签</span>
<span>子span标签</span>
</div>
<hr style="border:5px solid red"/>
</body>
</html>