层次选择器
-
- 后代选择器
- 后代选择器的语法是使用空格隔开(ancestor descendant) 选取ancestor元素里的所有descendant(后代)元素 ,返回元素集合,如:$("#menu span").css("color","red")选取#menu下所有的<span>元素
<div id="menu"> <span>这里是第一个span标签</span> <div class="menu"> <span>这里是第二个span标签</span> </div> <span>这里是第三个span标签</span> </div>
-
- 子选择器
- parent>child 选取parent元素下的child(子)元素, 返回元素集合,如:$("#menu>span")选取#menu下的子元素<span>
<div id="menu"> <span>这里是第一个span标签</span> <div class="menu"> <span>这里是第二个span标签</span> </div> <span>这里是第三个span标签</span> </div>
-
- 相邻元素选择器
prev+next 选取紧邻prev元素之后的next元素,返回元素集合,$("h2+dl")选取紧邻<h2>元素之后的同辈元素<dl>
<div id="menu"> <h2>只是标题标签</h2> <dl> <dt>自定义列表标题</dt> <dd>描述标题的信息</dd> </dl> <dl> <dt>自定义列表标题2</dt> <dd>描述标题的信息2</dd> </dl> </div>
-
- 同辈元素选择器
- prev~siblings 选取prev元素之后的所有sibings(同辈)元素,返回元素集合,$("h2~dl")选取<h2>元素之后所有的同辈元素<dl>
<div id="menu"> <h2>只是标题标签</h2> <dl> <dt>自定义列表标题</dt> <dd>描述标题的信息</dd> </dl> <dl> <dt>自定义列表标题2</dt> <dd>描述标题的信息2</dd> </dl> </div>
- prev~siblings 选取prev元素之后的所有sibings(同辈)元素,返回元素集合,$("h2~dl")选取<h2>元素之后所有的同辈元素<dl>