伪类（伪类选择器）
伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
静态伪类和动态伪类
伪类选择器分为两种。
（1）静态伪类：只能用于超链接的样式。如下：
-
:link超链接点击之前 -
:visited链接被访问过之后
PS：以上两种样式，只能用于超链接。
（2）动态伪类：针对所有标签都适用的样式。如下：
-
:hover“悬停”：鼠标放到标签上的时候 -
:active“激活”： 鼠标点击标签，但是不松手时。 -
:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）
PS：以上三种样式，只能用于超链接。
超链接a标签
超链接的四种状态
a标签有4种伪类（即对应四种状态），要求背诵。如下：
-
:link“链接”：超链接点击之前 -
:visited“访问过的”：链接被访问过之后 -
:hover“悬停”：鼠标放到标签上的时候 -
:active“激活”： 鼠标点击标签，但是不松手时。
记住，在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
E:first-child 匹配作为父元素第一个子元素E
选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式：
p:first-child
{
background-color:yellow;
}
E:last-child
匹配作为父元素最后一个子元素E
E:only-child
匹配作为父元素的唯一一个子元素E
E:nth-child(n)
匹配作为父元素的第n个子元素E。括号中是一个具体的数字（还可以这样用：nth-child(2n+1)表示奇数项， nth-child(2n+2)表示偶数项）
伪元素选择器
1、::before 和 ::after
- 必须带一个属性content
2.在内部内容的前面或者后面插入内容
<div>必须带一个属性content</div>
div::before {
content: "我是插入的内容";
background: #572eb8;
}
1.1 当插入的内容定义宽高和其他属性时，其实就是一个盒子（必须通过display转换，因为默认是一个行内元素）。
<body>
<div>盒子1</div>
</body>
div{
width: 500px;
height: 500px;
border: 1px solid #000;
}
div::before{
content: "插入的盒子";
display: block;
width: 200px;
height: 200px;
background: rgb(211, 29, 29);
}
