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>
