1.一般兄弟选择器,选择指定元素之后的所有匹配的兄弟元素,之前选不中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.一般兄弟选择器,选择指定元素之后的所有匹配的兄弟元素,之前选不中
$("#zxw2~div").css("color","red"); // id=zxw2后的所有兄弟div标签
$("#zxw2~p").css("color","blue"); // id=zxw2后的所有兄弟p标签
})
</script>
</head>
<body>
<div id="box">
<div id="zxw1">我要自学网1</div>
<p id="zxw2">我要自学网2</p>
<div id="zxw7">我要自学网1</div>
<p class="zxw">我要自学网2</p>
<div id="zxw3">我要自学网3</div>
<p id="zxw4">我要自学网4</p>
<p class="zxw">我要自学网2</p>
<div id="zxw5">我要自学网5</div>
<p>
<span class="zxw">我要自学网6</span>
</p>
</div>
</body>
</html>
2.相邻兄弟选择器,选择指定元素之后的所有匹配的兄弟元素,之前选不中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//2.相邻兄弟选择器,选择指定元素之后的所有匹配的兄弟元素,之前选不中
$("#zxw2+div").css("color","blueviolet");
$("#zxw2+p").css("color","red"); //找不到因为和zxw2相邻的不是P元素而是div元素
$(".zxw+div").css("color","red");
})
</script>
</head>
<body>
<div id="box">
<div id="zxw1">我要自学网1</div>
<p id="zxw2">我要自学网2</p>
<div id="zxw7">我要自学网1</div>
<p class="zxw">我要自学网2</p>
<div id="zxw3">我要自学网3</div>
<p id="zxw4">我要自学网4</p>
<p class="zxw">我要自学网2</p>
<div id="zxw5">我要自学网5</div>
<p>
<span class="zxw">我要自学网6</span>
</p>
</div>
</body>
</html>
3.父子选择器,一定是父子关系（孙子关系不行），切记不是后代关系
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//3.父子选择器,一定是父子关系（孙子关系不行），切记不是后代关系
//$("#box .zxw").css("color","red");这是后代选择器
$("#box>.zxw").css("color","red");//这是父子选择器，
//div#wyzxw${我要自学网$}*4
})
</script>
</head>
<body>
<div id="box">
<div id="zxw1">我要自学网1</div>
<p id="zxw2">我要自学网2</p>
<div id="zxw7">我要自学网1</div>
<p class="zxw">我要自学网2</p>
<div id="zxw3">我要自学网3</div>
<p id="zxw4">我要自学网4</p>
<p class="zxw">我要自学网2</p>
<div id="zxw5">我要自学网5</div>
<p>
<span class="zxw">我要自学网6</span>
</p>
</div>
</body>
</html>
