console
<body>
<div class="wrap-only-child">
<mark>.wrap-only-child>.wrap-only-child>.wrap1 :nth-child(3)</mark>
<div class="wrap wrap1">
<span>wrap1-span1</span>
<div>wrap1-div1</div>
<span>wrap1-span2</span>
<div>wrap1-div2</div>
<div>wrap1-div3</div>
<div>wrap1-div4</div>
<span>wrap1-span3</span>
<div>wrap1-div5</div>
<span>wrap1-span4</span>
</div>
<mark>.wrap-only-child>.wrap-only-child>.wrap2 :nth-child(2n+1)</mark>
<div class="wrap wrap2">
<span>wrap1-span1</span>
<div>wrap1-div1</div>
<span>wrap1-span2</span>
<div>wrap1-div2</div>
<div>wrap1-div3</div>
<div>wrap1-div4</div>
<span>wrap1-span3</span>
<div>wrap1-div5</div>
<span>wrap1-span4</span>
</div>
</div>
<div class="wrap-only-of-child">
<mark>.wrap-only-of-child>.wrap1 :nth-of-type(3)</mark>
<div class="wrap wrap1">
<span>wrap1-span1</span>
<div>wrap1-div1</div>
<span>wrap1-span2</span>
<div>wrap1-div2</div>
<div>wrap1-div3</div>
<div>wrap1-div4</div>
<span>wrap1-span3</span>
<div>wrap1-div5</div>
<span>wrap1-span4</span>
</div>
<mark>.wrap-only-of-child>.wrap2 :nth-of-type(2n+1)</mark>
<div class="wrap wrap2">
<span>wrap2-span1</span>
<div>wrap2-div1</div>
<span>wrap2-span2</span>
<div>wrap2-div2</div>
<div>wrap2-div3</div>
<div>wrap2-div4</div>
<span>wrap2-span3</span>
<div>wrap2-div5</div>
<span>wrap2-span4</span>
</div>
</div>
</body>
body>div {
margin: 0px 0 24px 0;
border: 1px solid #000;
}
.wrap-only-child>.wrap,
.wrap-only-of-child>.wrap {
margin: 0px 0 24px 0;
}
/* 不区分类型-选择.wrap-only-child>.wrap 下的第三个子元素：第三个子元素就是<span>wrap1-span2</span> */
.wrap-only-child>.wrap1 :nth-child(3) {
background-color: red;
}
/* 不区分类型-选择子元素的单数位元素 */
.wrap-only-child>.wrap2 :nth-child(2n+1) {
background-color: red;
}
/* 区分类型-选择.wrap-only-child>.wrap 下的第三个子元素；因为子元素有两种div和span 所以都选择第三个 */
.wrap-only-of-child>.wrap1 :nth-of-type(3) {
background-color: red;
}
/* 区分类型-选择各自类型的子元素的单数位元素 */
.wrap-only-of-child>.wrap2 :nth-of-type(2n+1) {
background-color: red;
}