层次选择器
层次选择器通过DOM元素之间的层次关系来获取元素
//下面通过demo演示上面的理论
<!DOCTYPE html> <html> <!--层次选择器--> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script> $(function() { //后代选择器,获取并设置#menu下的<span>元素的背景颜色 $("#menu span").css("background-color", "red"); /*子选择器,语法构成(parent>child)描述(选取parent元素下的child(子) 元素) $(" #menu>span" )选取#menu的子元素<span> * */ $("#menu>span").css("background-color", "yellow"); //相邻选择器,获取并设置紧接在<h2>元素后的<dl>元素的背景颜色,语法(prev+next), $("h2+dl").css("background-color","blue"); //同辈选择器,获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色 $("h2~dl").css("background-color","gold"); }); </script> </head> <body> <div id="menu"> <h2>全部旅游产品分类</h2> <dl> <dt>北京周边旅游<span>特价</span></dt> <dd> <a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a> </dd> </dl> <dl> <dt>景点门票</dt> <dd> <a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a> </dd> <dd> <a href="#">山水</a> <a href="#">双休</a> </dd> </dl> <span>更多分类</span> </div> </body> </html>
![]()