第2章选择器 =>伪类和伪元素 P57-CSDN博客

本文链接：https://blog.csdn.net/conkeyn/article/details/83392533

利用伪类选择器和伪元素选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所指示的幻像类指定样式。换句话说，会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。

伪类名	描述
:link	指示作为超链接（即有一个href属性）并指向一个示访问地址的所有锚。注意，有些浏览器可能会不正地将:link解释为指向任何超链接，包括已访问和未访问的超链接。
:visited	指示作为已访问地址超链接的所有锚。

动态伪类：


伪类名称	描述
:focus	指示当前用有输入焦点的元素，也就是说，可以接受键般输入或者能以某种方式激活的元素。
:hover	指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接。
:active	指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。

类似于:link和:visited，这些伪类最常用于超链的上下文中。很多web页面都有类似的样式：

a:link{color:navy}

a:visited{color:gray}

a:hover{color:red}

a:active{color:yellow}

前两个规则使用静态伪类，后两个利用动态伪类。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接伪类</title>
<style type="text/css">
/* unvisited links are blue*/
a:link{
	color:blue;
}
/* visited links are purple*/
a:visited{
	color:purple;
}
input:focus{
	background:silver;
	font-weight:bold;
}
textarea:focus{
	background:silver;
	font-weight:bold;
}
</style>
</head>

<body>
<a href="#">link</a><br/>
<input type="text" name="text1"/><br/>
<textarea name="textarea1"></textarea>
</body>
</html>

显示效果：