以上四个分别是：
- 子元素选择器（直接父子关系）
- 后代元素选择器（后代所有，包括孙子关系）
- 相邻元素选择器（紧邻元素的下一个元素）
- 兄弟元素选择器（所有与元素同级的）
示例：运用这四个选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div id="test">
<p id="p1"></p>
<div>
<p id="p2"></p>
</div>
</div>
<!--<div></div>-->
<p id="p3"></p>
<p id="p4"></p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//子元素选择器
var ps=$("#test>p");
console.log(ps)
//后代（子孙）元素选择器
ps=$("#test p")
console.log(ps)
//相邻元素选择器
ps=$("#test+p")
console.log(ps)
//兄弟元素选择器
ps=$("#test~p")
console.log(ps)
</script>
</html>
运行结果：
注意，如果把注释的那一行去掉注释，运行结果就变成：
相邻元素选择器就没有任何元素被选中，因为id为test的div紧邻它的下一个元素变成了div，而不是p。