话不多说，请看效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04jquer中的层级选择器B</title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" charset="UTF-8"></script>
		<script>
			$(function(){
				//$("div span").css("color","blue");将div下面 所有 的sapn标签字体都改了颜色
				//$("div>span").css("color","blue");将div下面的直系子标签字体都改了颜色
				//$("#sp1 + span").css("color","blue");将id为sp1的标签紧挨着的标签字体都改了颜色(注意：换行也算)
				//$("#sp1~span").css("color","blue");将和id为sp1标签处于同一层级的标签字体都改了颜色
			})
		</script>
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			<span id="sp1">富强民主，文明和谐</span><br />
			<span>富强民主，文明和谐</span><br />
			<span>富强民主，文明和谐</span><br />
			<p>
				<span>诚信友善，爱国敬业</span><br />
				<span>诚信友善，爱国敬业</span><br />
				<span>诚信友善，爱国敬业</span><br />
			</p>
		</div>
	</body>
</html>

无操作时：

 

jquery修改span文本 jquery修改span颜色_javascript

$("div span").css("color","blue");

 

jquery修改span文本 jquery修改span颜色_html_02

$("div>span").css("color","blue");

 

jquery修改span文本 jquery修改span颜色_javascript_03

$("#sp1 + span").css("color","blue");

 

jquery修改span文本 jquery修改span颜色_html_04

无效果是因为 ：

$("#sp1 + span").css("color","blue");//将id为sp1的标签紧挨着的标签字体都改了颜色(注意：换行也算) ，此时他是对换行进行的操作，我们将换行除去后：

 

jquery修改span文本 jquery修改span颜色_html_05

 

jquery修改span文本 jquery修改span颜色_html_06

$("#sp1~span").css("color","blue");

 

jquery修改span文本 jquery修改span颜色_javascript_07