伪类和伪元素

介绍

伪类和伪元素是CSS中用于选择和格式化页面元素的两种不同机制。

伪类：伪类是用来选择DOM树中已有的元素，并根据这些元素的状态或位置来改变它们的样式。
伪元素：伪元素则是用来创建和控制不在DOM树中的内容的样式。它们通常用来插入或处理内容，而不是直接与文档的结构化内容相关。

具体区分

状态伪类（如:hover、:active、:focus等）会根据用户与元素的交互（如鼠标悬停、被点击、获得焦点等）来改变元素的样式。

结构性伪类（如:first-child、:last-child、:nth-child等）则是根据元素在文档结构中的位置来选择元素。

伪元素 ::before 和 ::after 伪元素可以在元素的内容前后插入内容，而 ::first-letter 伪元素可以用于设置段落的第一个字母的样式。

注意

伪类使用单冒号
伪元素使用双冒号

使用

1.状态伪类：

<!DOCTYPE html>
<html>
<head>
	<style>
		a:hover {
			color: red;
		}
	</style>
</head>
<body>
	<a href="#">鼠标悬停时，链接文字变为红色</a>
</body>
</html>

2.结构性伪类：

<!DOCTYPE html>
<html>
<head>
	<style>
		p:first-child {
			font-weight: bold;
		}
	</style>
</head>
<body>
	<p>第一个段落的字体加粗</p>
	<p>第二个段落</p>
</body>
</html>

3.伪元素：

<!DOCTYPE html>
<html>
<head>
	<style>
		p::before {
			content: "在段落前插入文本";
			color: blue;
		}
	</style>
</head>
<body>
	<p>这是一个段落</p>
</body>
</html>

总结

总的来说，伪类和伪元素都是CSS的强大工具，它们允许开发者对页面上的元素进行更精细的控制和样式化，但它们的作用对象和使用方法有所不同。