<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
</script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>点我</button>
</body>
</html>初始时，界面效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("ul li:first-child").hide();
});
});
</script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>点我</button>
</body>
</html>
从作用效果可以看出，first只对第一个ul中的第一个li隐藏，而first-child对每个ul中的第一个li隐藏。