目录
伪类选择器
什么是伪类？
伪类即不存在的类，它是一种特殊的类，用来描述一个元素的特殊状态。(例如：第一个元素，被点击的元素，鼠标移入的元素···)
伪类的特点
一般请情况下，使用：开头。例如：
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
4、 :only-child 选择唯一的子元素
特殊值：n 选中所有的 ；2n或even 选中偶数；2n+1或odd 选中奇数。
注意：以上这些伪类都是根据所有的子元素进行排序。
1、:first-of-type 第一个子元素
2、:last-of-type 最后一个子元素
3、:nth-of-type() 选中第n个子元素注意：功能跟上面相似，不同的是，这是在同类型的子元素中去选择。
:not() 否定伪类作用：将符合条件的元素从选择器中去除。
:root{
background-color: #eee;
font-size: 30px;
}注意：根选择器，作用是选中页面，做一个整体的布局。
p:empty{
background-color: orange;
height: 20px;
}注意：空选择器，作用是选择没有内容的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>目标选择器</title>
<style>
:target{
color: green;
border: 1px solid red;
}
</style>
</head>
<body>
<p><a href="#p1">战狼2</a></p>
<p><a href="#p2">长空之王</a></p>
<p id="p1">战狼2简介</p>
<p id="p2">长空之王简介</p>
</body>
</html>示图：
注意：目标选择器是点击链接才产生效果。
伪元素选择器
什么是伪元素？
伪元素：表示页面中一些特殊的并不真实存在的元素。（元素的位置）
p::first-letter{
font-size: 30px;
color: red;
}::first-letter 表示第一个字母
p::first-line{
background-color: pink;
}::first-line 表示第一行
p::selection{
color: green;
}::selection 表示选中的内容
p::before{
content: "他好";
}
p::after{
content: '你也好';
}::before 表示在元素的开始位置添加文字；::after 表示在元素的结束位置添加文字
注意：before和after必须要结合content使用。
a元素的伪类
a:link{
color: red;
}:link 用来表示未访问过的链接（正常链接）
a:visited{
color: green;
}:visited 用来表示访问过的链接
span:hover{
background-color: red;
color: green;
}:hover 用来表示鼠标移入的状态
span:active{
font-size: 40px;
}:active 鼠标点击后的状态（松开鼠标，点击的状态就会结束）
小贴士
:link,:visited 是超链接独有的，一般用的不是很多，了解即可。
:hover,:active 是所有的标签都有的，用的地方比较多，必须掌握。
本文含有隐藏内容，请 开通VIP 后查看