parent > child

选择某元素的所有直接子元素。即子元素选择器。与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素。

作为一个 CSS 选择器,元素组合选择器已经被所有的主流浏览器所支持,例如:Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本。但是要特别注意的是,Internet Explorer 6 及以下版本并不支持。然而,在 jQuery 中,该选择器(及其它选择器)可以在所有的浏览器中运行,包括 IE6。

子元素选择器(E > F)可以看成是一种特殊形式的后代元素选择器(E F),只不过是该选择器只选择后代的第一级元素。

注意: $("> elem", context) 这种用法将会在未来的版本的被废弃。因为和其它可代替方案相关比,不建议使用这种用法。

示例:

为无序列表 <ul class="topnav"> 的所有直接子元素加上边框。

<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>


                    
<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2 
        <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
       </li>
    <li>Item 3</li>
</ul>


<script>

$("ul.topnav > li").css("border", "3px double red");

</script>
</body>
</html>

演示: