【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式

这篇具有很好参考价值的文章主要介绍了【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、链接伪类选择器

1、语法说明

链接伪类选择器可以设置链接文本的不同状态的样式 :

未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ;

	a:link

已访问链接样式 : 点击过的链接 , 链接变成该样式 ;

	a:visited

鼠标移动到链接样式 : 鼠标移动到链接上方 , 链接变成该样式 ;

	a:hover

选定链接样式 : 按下鼠标松开时 , 变成该样式 ;

	a:active

链接伪类选择器语法 :

a:link {
	属性名称:属性值;
}
a:visited {
	属性名称:属性值;
}
a:hover {
	属性名称:属性值;
}
a:active {
	属性名称:属性值;
}

2、常用方式

注意 :

顺序必须严格遵守 LVHA 次序 : 使用链接伪类选择器时 , 四种选择器必须按照上述顺序 , 如果顺序颠倒会出现错误 ;
实际用法 : 在实际开发时 , 一般只需要设置 a:hover 鼠标经过的样式 , 其它的三种不需要设置 , 不常用 ;

常用方式 : 如果要给 .nav 类下的 a 链接指定样式 , 则需要使用后代选择器 + 链接伪类选择器进行指定 ;

a:link 链接伪类选择器不常用 , 设置 a 标签样式等同于 a:link 样式效果 ;

		/* a 标签选择器 同时设置的样式等同于 a:link 链接伪类选择器 */
		.nav a {
			color: gray;
		}
		/* :hover 链接伪类选择器 鼠标经过变成红色 */
		.nav a:hover {   
			color: red;
		}

CSS 基础选择器 :

标签选择器
类选择器
ID 选择器
通配符选择器

3、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>链接伪类选择器</title>
	<base target="_blank"/>
	<style>
		/*未访问链接:默认的样式 , 界面打开后 , 默认显示该样式*/
		a:link {
			color: blue;
		}
		/*已访问链接:点击过的链接*/
		a:visited {
			color: red;
		}
		/*鼠标移动到链接:鼠标移动到 链接 上方*/
		a:hover {
			color: purple;
		}
		/*选定链接:按下鼠标松开时*/
		a:active {
			color: orange;
		}
	</style>
</head>
<body>
	<a href="#">链接伪类选择器1</a>
	<a href="#">链接伪类选择器2 参照组</a>
</body>
</html>

显示效果 :

默认状态 : 打开后的默认状态 , 都是蓝色 ;
鼠标移动到链接上 , 变成紫色 ;
鼠标点击松开 , 变成橙色 ;
整个流程操作完毕后 , 链接都变成了红色 , 这是因为两个链接都是 # , 一旦访问都同时变为已访问状态 ;

a:hover,CSS,css,链接伪类选择器,复合选择器,前端,html 文章来源地址https://www.toymoban.com/news/detail-758194.html

到了这里，关于【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！