:nth-child(n):父元素的子元素的第n个
:nth-of-type(n):父元素的 某类 子元素的第n个
注:n从0起,元素index从1起
nth-child(n)和nth-of-type(n)例:
<head>
<style>
body :nth-child(2) {
height: 30px;
background: blue;
color: #fff;
}
</style>
</head>
<body>
<p>1 - p1</p>
<div>2 - div1</div>
<p>3 - p2</p>
<div>4 - div2</div>
</body>
替换 :nth-child 为 :nth-of-type
<style>
body :nth-of-type(2) {
height: 30px;
background: blue;
color: #fff;
}
</style>