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) | 同上，但是從最后一個子元素開始計數(shù)。 | 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
