伪类选择器和伪类元素
伪类专门用于表示元素的某种状态，比如访问过的超链接，获取焦点的文本框
当我们需要为元素的某种状态设置样式的时候，我们可以使用伪类
一、伪类选择器
图片发自简书App
页面内容如下：
<a href="https://www.baidu.com">
baidu.com</a>
<a href="https://www.baidu123456.com">
baidu.com</a>
<p>猪八戒爱媳妇</p>
1.将两个链接的背景颜色设置为红色
a:link{
color:red;
}
效果如下：
图片发自简书App
- 点击第一条链接后，将该链接的字体颜色设置为巧克力色
a:visited{
color: chocolate ;
}
图片发自简书App
3.p元素在被鼠标划过时，字体大小变为20px;
p: hover{
font-size: 20px;
}
4.其他的几个伪类类似
二、伪元素
图片发自简书App
网页body内的代码：
<p> 大风起兮云飞扬，
威加海内兮归故乡，安得猛士兮守四方！</p>
要求：
1.首个字设置字体大小为30px，颜色为红色
p:first-letter {
font-size:30px;
color:red;
}
效果如下：
图片发自简书App
2.设置首行背景颜色为蓝色
p:first-line{
background-color:blue;
}
效果如下：
图片发自简书App
3.在正文前面加我爱小红，设置字体颜色为咖啡色，字体大小为50px的样式
p:before{
content:"我爱小红";
color: chocolate;
font-size:50px;
}
效果如下：
图片发自简书App
4.p:after同上
