Child Selector (“parent > child”)
描述: 选择所有指定“parent”元素中指定的"child"的直接子元素。
parent: 任何有效的选择器。
child: 用来筛选子元素的选择器。
作为一个CSS选择器,这个子元素组合器被Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本等现代浏览器支持,但尤其不被Internet Explorer6及以下版本支持。然而在jQuery中,这个选择器(与其他所有选择器)能在所有支持的浏览器中工作,包括IE6。
这个子元素组合器(E > F)和(E F)都作为后代组合,但是他们有所不同,更具体的是(E > F)它只会选择第一级的后代。
<script>$("ul.topnav > li").css("border", "3px double red");</script>
Descendant Selector (“ancestor descendant”)
描述: 选择给定的祖先元素的所有后代元素。
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。
一个元素的后代可能是该元素的一个孩子,孙子,曾孙等。
<script>$("form input").css("border", "2px dotted blue");</script>
Next Adjacent Selector (“prev + next”)
prev: 任何有效的选择器。
next: 用于筛选紧跟在 "prev" 后面的元素的选择器。
其中重要的一点既要考虑下一个相邻兄弟选择器( prev + next
)和一般兄弟选择器( prev ~ siblings
)所选择到的元素,必须在同一个父元素下。
<script>$("label + input").css("color", "blue").val("Labeled!")</script>
Next Siblings Selector (“prev ~ siblings”)
prev: 任何有效的选择器
siblings: 一个选择器来过滤第一选择器以后的兄弟元素。
(prev + next
) 和 (prev ~ siblings
)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素。
查找所有跟在 id 为 #prev 的元素后面的所有 div。注意,跟在后面的 span 不会被选中,因为它不是 div 。同时 "niece" 也不会被选中,因为它是某个兄弟元素的子元素,而不是兄弟元素。
<!DOCTYPE html> <html> <head> <style> div,span { display:block; width:80px; height:80px; margin:5px; background:#bbffaa; float:left; font-size:14px; } div#small { width:60px; height:25px; font-size:12px; background:#fab; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div>div (doesn't match since before #prev)</div> <span id="prev">span#prev</span> <div>div sibling</div> <div>div sibling <div id="small">div niece</div></div> <span>span sibling (not div)</span> <div>div sibling</div> <script>$("#prev ~ div").css("border", "3px groove blue");</script> </body> </html>