a元素和它的多重人格以及伪类

最新推荐文章于 2022-09-15 23:28:27 发布

xvzhengyang

最新推荐文章于 2022-09-15 23:28:27 发布

阅读量194

点赞数

分类专栏： html 前端文章标签： a标签 html

本文链接：https://blog.csdn.net/xvzhengyang/article/details/86438823

版权

前端同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

下面的span当鼠标悬停在上面的时候背景色会改变,代码如下所示

           1.样式方面,链接表现得稍有些不同.链接是元素世界的变色龙,取决于具体环境,会瞬间改变样式
           2.主要是根据状态改变样式. 未访问已访问悬停状态(其他状态 focus指的是浏览器将焦点放到你的链接上,有些浏览器允许
           按下Tab键轮流访问页面上的所有连接.浏览器访问到这个链接时,这个链接就拥有焦点.设置一个焦点伪类值对于提高提供访问性很有帮助.
           因为需要使用键盘来访问链接的人会知道他们何时选择到正确的链接.
           和 active用户第一次单机一个链接时,就处于活动状态active)
           3.链接可以同时处于多种状态:例如我的链接已经访问过,而且鼠标是悬停在它上面,另外用户可能正在单机它,这些情况
           可能同时发生.所以一般认为适当的顺序是:link visited hover focus

4.伪类:表现的像一个类,但是不是类;允许指定样式,但是不会在html中真正的输入这些伪类.
除了hover还有如 :first-child对应元素第一个子元素; :last-child对应元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a元素和它的多重人格以及伪类</title>
		<!-- 未完待续 -->
		<style type="text/css">
			/* 这里使用到伪类 */
			a:link{
				color: green;
			}
			a:visited{
				color: red;
			}
			a:hover{
				color: yellow;
			}
			a:focus{
				color: black;
				/* 有些浏览器允许按下tab键,来轮流访问页面上的所有连接,浏览器访问到某个链接时,这个链接就拥有焦点 */
			}
			a:active{
				color: pink;
			}
			/* 伪类 */
			span:hover{
				background-color: #0000FF;
			}
			span{
				margin-left: 20px;
			}
			.select{
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<a href="http://www.baidu.com" title="百度一下 你就知道" target="_blank" >这是一个超链接</a>
			<!-- 默认未访问超链接是蓝色的 -->
			<!-- 已访问默认是紫色的(浏览器决定) -->
			<!-- 适当的顺序:link visited hover focus active -->
			<div>
				<span id="one">这是一个使用了伪类的sapn</span>
				<span id="two">这是一个使用了伪类的sapn</span>
				<span id="three">这是一个使用了伪类的sapn</span>
				<span id="four">这是一个使用了伪类的sapn</span>
				<span id="five">这是一个使用了伪类的sapn</span>
				<script type="text/javascript">
					
				</script>
			</div>
		</div>
	</body>
</html>