伪类选择器与 .class 的用法特殊,按照 .class 实际所在位置使用 nth-of-type(n) 里的 n,与常规用法有异
<ol>
<h1>hahaha</h1>
<li class="box1">ccc</li>
<li class="box1">ccc</li>
<li class="box">
bbb
<p>①</p>
<p>②</p>
<p>③</p>
</li>
<li class="box">ccc</li>
<li class="box">ddd</li>
</ol>
1、元素和伪类选择器
- E:first-child 选取元素E在同一级别下的首位,非首位不显示,需要借助 nth-child(n)
li:first-child {
background: lightgreen;
border: 1px solid #ddd;
color: #fff;
}
- E:first-of-type 选取元素E在同一级别下的首位,非首位继续下寻选取同类型元素首位
li:first-of-type {
background: lightblue;
border: 1px solid #ddd;
color: #fff;
}
2、类和伪类选择器
- .class:first-child 选取类 .class 在同一级别下的首位,非首位不显示,需要借助 nth-child(n)
.box:nth-child(4) {
background: lightblue;
border: 1px solid #ddd;
color: pink;
}
- .class:first-of-type 选取类 .class 在同一级别下的首位,非首位不显示,需要借助 nth-of-type(n)
.box:nth-of-type(2) {
background: lightblue;
border: 1px solid #ddd;
color: pink;
}