html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang)

(47) 2024-06-09 20:01:01

伪类选择器:
伪类:是逻辑上存在,再文档树树中不存在的类

-------------应用:超链接--具有四种状态(未访问状态、鼠标悬停状态、活动状态、访问过状态)

语法规则 

选择器:伪类{

        属性:属性值;

        属性:属性值;

,,,

伪类类型 描述
:link 将样式添加到未被访问过的链接
:hover 当鼠标悬停在元素上方,向元素添加样式
:active 将样式添加到被激活的元素
:visited 将样式添加到已经被访问过的元素
:first-child 将样式添加到文档树中每一层元素指定类型的第一个子元素
:first-child 当向前被选中,获得焦点的元素添加元素样式
:lang 向带有指定lang属性的元素添加样式

 html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第1张

html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第2张

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 100px;
			background-color:#1CF912
		}
		
	</style>
	
</head>
<body>
	<div class="box">
		<a href="#" class="cus-link">
			按钮
		</a>
	</div>

</body>
</html>

html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第3张

进行超链接的设置

link

默认设置


 a==链接标签 鼠标上去 会变成手的形状 该链接地下会有下划线

link伪类-----设置默认状态下的链接

按钮:display 

背景色

圆角

字体

颜色

去掉下划线

 text-decoration: none; 去掉下划线

html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第4张 

 字体 font-size: 20px;

html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第5张 

设置背景色 :    background-color: #DF358F;

 html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第6张

 

 圆角            border-radius: 4px;

html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第7张

按钮:display 

html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第8张


当鼠标停在上方 进行背景色的修改background-color: 

使用hover

前景色是文字的颜色

html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第9张

对图片进行鼠标悬停进行放大

 html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第10张

 html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第11张

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 100px;
			background-color:#1CF912
		}
		a.cus-link:link{
			text-decoration: none;
			font-size: 20px;
			background-color: #DF358F;
			border-radius: 4px;
			display: inline-block;
			padding: 3px 10px 4px;
			
		}
		a.cus-link:hover{
			background-color: aliceblue;
			color: aqua;
		}
		img{
			width: 60%;
			height: 60%;
		}
		img:hover{
			width: 90%;
			height: 90%;
		}
		
	</style>
	
</head>
<body>
	<div class="box">
		<a href="#" class="cus-link">
			按钮
		</a>
	</div>
	<img src="../images/logo.png" alt="logo">
	
</body>
</html>

实现效果html-更多的样式选择器(伪类选择器)--链接的四种变化(:link、:hover、:active、:visited、:first-chil:first-child、:lang) (https://mushiming.com/)  第12张

 

THE END

发表回复