标签：伪类 color 元素 选取 nth child type 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
p {
width: 200px;
height: 50px;
border: 1px solid black;
}
/*选取第一个*/
.a:first-child {
color: pink;
}
/*选取最后一个*/
.a:last-child {
color: blue;
}
/*选取指定那个，不区分类型，可以是数字或公式，例如2n，2n-1*/
.a:nth-child(3) {
color: red;
}
.a:nth-of-type(2) {
color: rgb(93, 180, 93);
}
/*只选取p元素里的第一个，加了of-type会区分元素类型*/
p:first-of-type {
background: darkblue;
}
/*只选取p元素里的最后一个，加了of-type会区分元素类型*/
p:last-of-type {
background: pink;
}
/*选取指定类型的某个元素，和nth-child不同点就是of-type会区分元素类型，从哪个元素开始选取，而nth-child不区分元素类型，不管相同或者不相同的元素，都是从他括号里指定的数字开始选取*/
p:nth-of-type(5) {
background: yellow;
}
</style>
</head>
<body>
<div class="a">a1</div>
<div class="a">a2</div>
<div class="a">a3</div>
<div class="a">a4</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>
标签：伪类,
color,
元素,
选取,
nth,
child,
type,
选择器
From： https://blog.51cto.com/u_15011997/5784534