jQuery层级选择器实例代码

子选择器与后代选择器

div下的第一个p元素

div下的第一个p元素

div下的article下的p元素

div下的article下的p元素

//子选择器

//$('div > p') 选择所有div元素里面的子元素P

$('div > p').css("border", "5px groove red");

//后代选择器

//$('div p') 选择所有div元素里面的p元素

$('div p').css("border", "9px groove green");

相邻兄弟选择器与一般兄弟选择器

选择器span元素

兄弟节点span,不可选

//相邻兄弟选择器

//选取prev后面的第一个的div兄弟节点

$(".prev + div").css("border", "3px groove blue");

//一般相邻选择器

//选取prev后面的所有的div兄弟节点

$(".prev ~ div").css("border", "3px groove blue");