1，说明：type : 类型
child : 孩子
代码说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器比较</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
var ys1 = $('li:nth-child(2)');
ys1.css({
width: '100px',
height: '100px',
backgroundColor: 'red',
});
}
</script>
</head>
<body>
<ul>
<li>01</li>
<span>02</span>
<li>03</li>
<li>04</li>
</ul>
</body>
</html>
运行结果：
<script>
$(function() {
var ys1 = $('li:nth-of-type(2)');
ys1.css({
width: '100px',
height: '100px',
backgroundColor: 'red',
});
}
运行结果：
总结： :nth-child()选择器，若第n个孩子不是指定的元素，则不会被选中。
nth-of-type()选择器，是在指定的类型中选取。