伪类选择器和伪类元素

伪类专门用于表示元素的某种状态，比如访问过的超链接，获取焦点的文本框

当我们需要为元素的某种状态设置样式的时候，我们可以使用伪类

一、伪类选择器

前端学习Day10

页面内容如下：

<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;
}

效果如下：

前端学习Day10

2. 点击第一条链接后，将该链接的字体颜色设置为巧克力色

a:visited{

color: chocolate ;
}

前端学习Day10

3.p元素在被鼠标划过时，字体大小变为20px;

p: hover{
font-size: 20px;
}

4.其他的几个伪类类似

二、伪元素

前端学习Day10

网页body内的代码：

<p> 大风起兮云飞扬，
威加海内兮归故乡，安得猛士兮守四方！</p>

要求：

1.首个字设置字体大小为30px，颜色为红色

p:first-letter {

font-size:30px;
color:red;
}

效果如下：

前端学习Day10

2.设置首行背景颜色为蓝色

p:first-line{
background-color:blue;
}

效果如下：

前端学习Day10

3.在正文前面加我爱小红，设置字体颜色为咖啡色，字体大小为50px的样式

p:before{
content:"我爱小红";
color: chocolate;
font-size:50px;

}

效果如下：

前端学习Day10

4.p:after同上