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

下面的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>

a元素和它的多重人格以及伪类相关推荐

CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
html伪类元素加图片,HTML中常见伪类和伪元素的区别
原标题:HTML中常见伪类和伪元素的区别提到伪类,在我的印象中最常用的不过是:hover.:active.:link.:visited,还有css3里的常用伪类选择器:last-child.:fir ...
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
伪类伪元素如何区分
前段时间在写网页的时候,使用了CSS的伪元素:after来实现样式,故而重温了一下伪类和伪元素.平时实现的时候便是拿出来用,但是真正区分两者的概念的时候却有点混淆了. 首先,查看一下W3S对伪类和伪元 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
伪类选择器和伪元素选择器
我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下: 伪类选择器: 伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说&quo ...
CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
伪类和伪元素的区别及使用场景
1. 伪类和伪元素的区别 1.1 作用不同伪类是一种状态,可以看看做是选择器.比如鼠标经过伪类 :hover , 比如结构伪类 li:nth-child, 一个冒号. 伪元素是元素, 简单来 ...

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

a元素和它的多重人格以及伪类相关推荐

最新文章

热门文章