<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
$('#btn').click(function () {
//所有的
//$('*').css('backgroundColor', 'red');
//后代选择器
//$('#dv p').css('backgroundColor', 'red');
//直接的p标签或者直接p标签里面的p标签
//$('#dv>p').css('backgroundColor', 'red');
//层后面直接的p标签
//$('#dv+p').css('backgroundColor', 'red');
//层后面所有的p标签
$('#dv~p').css('backgroundColor', 'red');
})
})
</script>
</head>
<body>
<input type="button" name="name" value="btn" id="btn" />
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<div style="300px;height:200px;background-color:yellow" id="dv">
<p>层中的第一个p标签</p>
<p>
层中的中间p标签
<p>
层中的p里面的p
</p>
</p>
<p>层中的第二个p标签</p>
<strong>
<p>strong中的p标签</p>
</strong>
</div>
<p>
层后面的第一个
</p>
<p>
层后面的第二个
</p>
</body>
</html>