<!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>