<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>层次选择器</title> <script src="../../JQuery/jquery-2.1.4.min.js"></script> <link href="../../CSS/2-6.css" rel="stylesheet" /> <script type="text/javascript"> $(function () { //匹配后代元素 $("#divMid").css("display", "block"); $("div span").css("display", "block"); }) $(function () { //匹配子元素 $("#divMid").css("display", "block"); $("div>span").css("display", "block"); }) $(function () { //匹配后面元素 $("#divMid + div").css("display", "block"); $("#divMid").next().css("display", "block"); }) $(function () { //匹配所有后面元素 $("#divMid ~ div").css("display", "block"); // $("#divMid").nextAll().css("display", "block"); }) $(function () { //匹配所有相邻元素 $("#divMid").siblings("div").css("display", "block"); }) </script> </head> <body> <div class="clsFraA">Left</div> <div class="clsFraA" id="divMid"> <span class="clsFraP" id="Span1"> <span class="clsFraC" id="Span2"></span> </span> </div> <div class="clsFraA">Right_1</div> <div class="clsFraA">Right_2</div> </body> </html>