<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<p id="p1" alex="tom">ppp</p>
<a href="">click</a>
<div class="outer">outer
<div class="inner">inner</div>
</div>
<div class="outer">outer
<div class="inner">inner
<p>tom</p></div>
<p>jerry</p>
</div>
<p>sadf</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<input type="text">
<!--选择标签+标签操作（css）+事件处理
-->
<script src="jquery-3.3.1.min.js"></script>
<script>
//$("li:eq(2)").css("color","red");筛选器
//$("li").eq(2).css("color","red");与筛选器做对比
//查找筛选器，根据已知标签查找需要操作的标签
//$(".outer").children("p").css("color","red");//outer下的p标签.很精准
//$(".outer").eq(0).next().css("color","red"); //范围处理,往下
//$("li").eq(2).prevUntil("li:eq(0)").css("color","red");//从2开始往上找，到0为止，不包含0和2
$(".outer").siblings().css("color","red");//兄弟标签，我的理解是同一级
</script>
</body>
</html>
