子元素选择器 (“parent > child”)
child selector
描述:选择用“parent”指定的元素下面所有的用“child”指定的直接子元素。
加入于: 1.0
jQuery( "parent > child" )parent: 任何有效的选择器。
child: 一个用来过滤子元素的选择器。
作为一个CSS选择器,子元素组合器受所有的现代web浏览器支持,包括Safari、Firefox、Opera、Chrome以及Internet Explorer 7以之后的版本,但是不受Internet Explorer 6及以前的版本支持。然而,在jQuery中,该选择器(以及别的选择器)能够跨所有支持的浏览器起作用,包括IE6。
该子元素组合器(E > F)可以被想象成一个特殊的形式的后代元素组合器(E F),它只选择第一级的后代元素。
示例
给所有的作为<ul class="topnav">的子元素的列表项目加个边框。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>child demo</title>
<style>
body {
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果