$("#div1 span").css("color","red"); <div> <span>我是span1</span> ***会被选中，是#div1的后代span <div> <span>我是span3</span> ***会被选中，也是#div1的后代span </div> </div> <span>我是span2</span> ***不会被选中，不是#div1的后代
(2)、parent > child 根据父元素匹配所有的子元素 返回所有的子元素 用大于号">"分隔
$("#div1 > span").css("color","red"); <div> <span>我是span1</span> ***会被选中，是#div1的子元素span <div> <span>我是span3</span> ***不会被选中，是#div1的后代元素，但不是直接子元素 </div> </div> <span>我是span2</span> ***不会被选中，不是#div1的子元素
(3)、prev + next 匹配紧接在prev元素后的相邻的下一个元素 用加号"+"分隔。
相当于.next()方法
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").next().css("color","red"); <div> <p>我是第一个P</p> ***不会被选中，是class为p1的上一个了 <p>我是第二个P</p> ***prev本身并不会被选中 <p>我是第三个P</p> ***会被选中，是class为p1的下一个相邻元素 <p>我是第四个P</p> ***不会被选中，不是class为p1的下一个，是下二个了 </div>
(4)、prev ~ sibings 匹配prev后面的的所有兄弟元素 用波浪线"~"分隔开
相当于 nextAll()方法
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").nextAll("p").css("color","red"); <div> <p>我是第一个P</p> ***不会被选中，是class为p1前面的元素 <p>我是第二个P</p> ***prev本身并不会被选中 <p>我是第三个P</p> ***会被选中，是class为p1后面的P兄弟元素 <p>我是第四个P</p> ***会被选中，也是class为p1后面的P兄弟元素 </div>
(5)、选中所有的兄弟元素 siblings() 方法
$(".p1").sibings("p").css("color","red"); <div> <p>我是第一个P</p> ***会被选中，是class为p1的P兄弟元素 <p>我是第二个P</p> ***prev本身并不会被选中 <p>我是第三个P</p> ***会被选中，是class为p1的P兄弟元素 <p>我是第四个P</p> ***会被选中，也是class为p1的P兄弟元素 </div>
3、简单过滤选择器
(1)、first()或:first 选中符合条件的第一个元素
$("#div1 > p:first").css("color","red") //此行代码相当于 $("#div1 > p").first().css("color","red"); <div> <p>我是第一个P</p> ***会被选中，是id为#div1下的第一个P元素 <p>我是第二个P</p> ***不会被选中，是第二个P元素了 <p>我是第三个P</p> ***不会被选中，是第三个P元素了 </div>
(2)、last()或:last 符合条件的最后一个元素