🐚作者简介：苏凉（专注于网络爬虫，数据分析）
🐳博客主页：苏凉.py的博客
🌐系列专栏：web前端基础教程
👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂
文章目录
前言css伪类选择器:active:link和:visited:hover伪类选择器合集css伪元素选择器伪元素合集::after和::before::first-letter::first-line::selection小结前言
上期给大家讲了css的一些选择器的使用，这期咱们一起学习css的另外两个选择器：伪类选择器以及伪元素选择器。
css伪类选择器
伪类用于定义元素的特殊状态。
设置鼠标悬停在元素上时的样式为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式
:active
用于选择活动链接。当您在一个链接上点击时，它就会成为活动的。即设置鼠标点击触发的样式。
实例：
<!DOCTYPE html><html lang="en"><head><title>伪类，伪元素</title><style>a:active{background-color: antiquewhite;text-decoration: none;font-size:larger;}input:active{font-size: large;color: blue;}</style></head><body><div><a href="https://suliang./" target="_blank">苏凉.py的博客</a><br><p></p><a href="" target="_blank">百度一下</a><br><p></p><input type="submit" value="点击提交"></div></body></html>
效果：
:link和:visited
对未点击的链接和已点击的链接进行样式设置。
<!DOCTYPE html><html lang="en"><head><title>伪类，伪元素</title><style>a:link{color: blueviolet;}a:visited{color: red;}</style></head><body><div><a href="https://suliang./" target="_blank">苏凉.py的博客</a><br><p></p><a href="/weixin_46277553/article/details/124882898?spm=1001..3001.5501">已点击的链接</a><br><p></p><a href="">百度一下</a><br><p></p><a href="liajie">未点击的链接</a><input type="submit" value="点击提交"></div></body></html>
效果：
:hover
鼠标悬停时的样式。
<!DOCTYPE html><html lang="en"><head><title>伪类，伪元素</title><style>div{background-color: aqua;width: 300px;height: 120px;}a:active{background-color: antiquewhite;text-decoration: none;font-size:larger;}input:active{font-size: large;color: blue;}div:hover{background-color: bisque;}a:hover{font-size: larger;color: red; }input:hover{font-size: larger;}</style></head><body><div><a href="https://suliang./" target="_blank">苏凉.py的博客</a><br><p></p><a href="" target="_blank">百度一下</a><br><p></p><input type="submit" value="点击提交"></div></body></html>
效果：
上面列举了一些常用的伪类选择题。下面给大家把全部的伪类选择器列举出来，可以一个一个去实现。
伪类选择器合集
css伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
设置元素的首字母、首行的样式在元素的内容之前或之后插入内容
伪元素合集
::after和::before
在元素之后/之前插入内容。
<!DOCTYPE html><html lang="en"><head><title>伪元素选择器</title><style>p::after{content:url(./img/picture.png);} p::before{content: url(./img/picture.png);}</style></head><body><p>这是一个段落</p></body></html>
效果：
::first-letter
选中元素的第一个字/字母/数字…
<!DOCTYPE html><html lang="en"><head><title>伪元素选择器</title><style>p::after{content:url(./img/picture.png);} p::first-letter{color:red;font-size: 70px;background-color: antiquewhite;}</style></head><body><p>这是一个段落</p></body></html>
效果：
::first-line
选择第一行
<!DOCTYPE html><html lang="en"><head><title>伪元素选择器</title><style> p::first-letter{color:red;font-size: 30px;background-color: antiquewhite;}p::first-line{background-color: pink;}</style></head><body><p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p><p>问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！</p><p>剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！</p></body></html>
效果：
::selection
设置选中时的样式。
<!DOCTYPE html><html lang="en"><head><title>伪元素选择器</title><style> p::first-letter{color:red;font-size: 30px;background-color: antiquewhite;}p::first-line{background-color: pink;}p::selection{background-color: green;color: yellow;}</style></head><body><p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p><p>问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！</p><p>剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！</p></body></html>
效果：
小结
前期的学习过程中，伪类和伪元素选择器给我们的反馈最直观，其中的一些还需大家实际操作后才能慢慢理解，后面我们逐渐的去了解其他一些知识点，一起加油！！下期再见！
