<div id="hd"> <p>后盾人 人人做后盾0</p> <p id="one">后盾人 人人做后盾1</p> <p>后盾人 人人做后盾2</p> <p>后盾人 人人做后盾3</p> <p>后盾人 人人做后盾4</p> <span>66666</span> <p>后盾人 人人做后盾5 <span>6666</span></p> <p>后盾人 人人做后盾6</p> <p>后盾人 人人做后盾7 <span>6666</span></p> <div id=""> <p>我们也是p标签8</p> <p>我们也是p标签9</p> <p>我们也是p标签10</p> </div> </div> 选择第一个 （0） $("#hd p").first().css({'color':'blue','font-size':'25px'}); 选择最后一个 （10） $("#hd p").last().css({'color':'blue','font-size':'25px'}); 选择第二个 （2） $("#hd p").eq(2).css({'color':'blue','font-size':'25px'}); 排除id=one的p标签（0，2，3，4，5，6，7，8，9，10） $("#hd p").not('#one').css({'color':'blue','font-size':'25px'}); 获取p标签中包含span标签的元素 （5，7） $("#hd p").has('span').css({'color':'blue','font-size':'25px'}); 选择p标签总的2，3，4元素 $("#hd p").slice(2,5).css({'color':'blue','font-size':'25px'}); 选择的是#hd里面的span标签 （两个6666） $("#hd p").find('span').css({'color':'blue','font-size':'25px'}); 选择的是紧邻在#one后面的那一个p标签 （2） $("#one").next('p').css({'color':'blue','font-size':'25px'}); 选择的是#one后面所有同级的p标签 （2，3，4，5，6，7） $("#one").nextAll('p').css({'color':'blue','font-size':'25px'}); 选择的是紧邻在#one前面的那一个p标签 （0） $("#one").prev('p').css({'color':'blue','font-size':'25px'}); 选择的是#one前面所有同级的p标签 （0） $("#one").prevAll('p').css({'color':'blue','font-size':'25px'}); 选择的是#one的父级元素 （0-10） $("#one").parent().css({'color':'blue','font-size':'25px'}); eg: <style type="text/css"> #a{ width: 600px; height: 500px; margin: 0 auto; border: 1px solid black; } .b{ width: 500px; height: 400px; margin: 30px; border: 1px solid blue; } .c{ width: 400px; height: 300px; border: 2px solid orangered; margin: 40px; } .d{ width: 300px; height: 200px; background: forestgreen; margin: 30px; } </style> <div id="a"> <div class="b"> <div class="c"> <div class="d"></div> </div> </div> </div> 选择所有的父级元素,并且筛选出class是b的 $(".d").parents('.b').css('background','pink'); 选择的是#one标签名是p的兄弟元素 $("#one").siblings('p').css({'color':'blue','font-size':'25px'}); 并集选择 $("p").add('span').css({'color':'blue','font-size':'25px'});