1、选择器说明
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 p 元素的每个 p 元素。 | 3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 p 元素的每个 p 元素。 | 3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的p 元素的每个 p 元素。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 p 元素的每个p元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
2、效果演示
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style type="text/css">
.div{
width: 100px;
}
.div:first-of-type{
color: red;
}
.div:last-of-type{
color: blue;
}
.div:nth-of-type(3){
border: 1px solid red;
}
.div:nth-last-of-type(2){
border: 1px solid blue;
}
</style>
</head>
<body>
<p class="p">p1</div>
<div class="div">div1</div>
<p class="p">p2</div>
<div class="div">div2</div>
<p class="p">p3</div>
<div class="div">div3</div>
<p class="p">p4</div>
<div class="div">div4</div>
<p class="p">p5</div>
<div class="div">div5</div>
</body>
</html>
运行效果：
image.png
