前端学习笔记二：CSS（6）伪类和伪元素

最新推荐文章于 2023-06-22 19:29:38 发布

大一哟

最新推荐文章于 2023-06-22 19:29:38 发布

阅读量120

点赞数

分类专栏：学习笔记文章标签： html css

本文链接：https://blog.csdn.net/Reiuji_Utsuho/article/details/107524469

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

继续：
这个例子，我管它叫多变的类和元素~~（跟女生一样）~~ ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style type="text/css">
		a{
			text-decoration: none;
		}
		p:link{
			color: #050b80;
		}
		a:visited{
			color: #ff03fb;
		}
		a:hover{
			color: #18b307;
		}
		a:active{
			color: #dbdb04;
		}
		p:first-of-type{
			color: #56E1B8;
		}
		p:last-of-type{
			color: #00BFFF;
		}
		a:before{
			content: url(../../html/05%20BaiduCloud%20Menu/one/img/压缩包.png);
		}
		a:after{
			content: url(../../html/05%20BaiduCloud%20Menu/one/img/文件.png);
		}
	</style>
	<body>
		<div id="item">
			<p> 第一段文字：</br>问：拖欠话费，打一人物</p>
			<p> 第二段文字：</br>答：古明地恋</p>
			<p>厉害，这都知道！</p>
			<a href="https://www.baidu.com/" target="_blank">风骚的百度</a>
		</div>
	</body>
</html>

运行结果：
默认情况：
在这里插入图片描述
光标放在链接上：

正在点击链接：

可以看到同一个没有类和id的标签的内容有不一样的地方，这就是伪类和为元素的应用。
它可以替代在设计网页的时候为一块内容里的首元素和末元素特意新建的子类。

通常（这次）用到的伪类样式有如下：

选择器	示例	说明
:link	p:link	选择p标签里的所有的链接
:visited	a:visited	选择a标签里访问过的链接
:hover	a:hover	选择a标签里被光标覆盖的链接
:active	a:active	选择a标签里被点击的链接
:first-child / :last-child	p:first-child / p:last-child	选择所有p元素的第一个/最后一个元素
:first-of-type / :last-of-type	p:first-of-type / p:last-of-type	选择的每一个p元素都是其父元素的第一个p元素
:before	p:before	在每个p元素之前插入内容
:after	p:after	子每个p元素之后插入内容
:first-lette r	p:first-letter	选择每个p元素的第一个字母

大一哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记二：CSS（6）伪类和伪元素

继续：这个例子，我管它叫多变的类~~（跟女生一样）~~ ：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <style type="text
复制链接

扫一扫