文章目录
前言
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.blog.csdn.net/" target="_blank">苏凉.py的博客</a><br> <p></p> <a href="https://www.baidu.com" 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.blog.csdn.net/" target="_blank">苏凉.py的博客</a><br> <p></p> <a href="https://blog.csdn.net/weixin_46277553/article/details/124882898?spm=1001.2014.3001.5501">已点击的链接</a><br> <p></p> <a href="https://www.baidu.com">百度一下</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.blog.csdn.net/" target="_blank">苏凉.py的博客</a><br> <p></p> <a href="https://www.baidu.com" target="_blank">百度一下</a><br> <p></p> <input type="submit" value="点击提交"> </div> </body> </html>
效果:
上面列举了一些常用的伪类选择题。下面给大家把全部的伪类选择器列举出来,可以一个一个去实现。
css伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
伪元素合集
<!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>
小结
前期的学习过程中,伪类和伪元素选择器给我们的反馈最直观,其中的一些还需大家实际操作后才能慢慢理解,后面我们逐渐的去了解其他一些知识点,一起加油!!下期再见!