html中伪类定义,伪类

本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!

伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

中文名

伪类

类    型

CSS术语相关概念

伪类

领    域

伪类CSS术语

编辑

语音

CSS伪类是用来添加一些选择器的特殊效果。

解释:在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。

由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。[1]

伪类有::first-child ,:link:,vistited,:hover:,:active,:focus,:lang,:right,:left,:first

何为伪类?就是css内置类css内部本身赋予它一些特性和功能,也就是你不用再class=...或id=...你就可以直接拿来使用,当然你也可以改变它的部分属性比如:a:link{color:#FF0000;}

CSS很多的建议并没有得到浏览器的支持,但有四个可以安全用在超链接上的伪类。

伪类释义

编辑

语音

伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类。

CSS很多的建议并没有得到浏览器的支持,但有四个可以安全用在超链接上的伪类。

:link用在未访问的连接上。

:visited用在已经访问过的连接上。

:active用于获得焦点(比如,被点击)的连接上。

:hover 用于鼠标光标置于其上的连接。

伪类示例

编辑

语音

782e702aa10e6a753d5f4394118ec93a.png

图1 效果图伪类中有代表性的两个是 ::after 和 ::before,举一个例子,比如想做一个如图1所示的分割线,代码如下:HTML>

p{

text-align:center;

}

p:after, p:before{

content:"";

position:absolute;

height:2px;

width:200px;

}

p:after{

right:0;

background-color:red;

}

p:before{

left:0;

background-color:green;

}

test

测试

使用chrome浏览器查看源代码会发现有::before和::after提示,如图2所示。

ed0f52ced0b16fb2c76d5545c7a2e039.png

图2 示意图

伪类注意

编辑

语音

尽管CSS给予你绕开的控制权,用不同的颜色表示已经访问过的连接是一个很好的习惯,因为很多用户还是这样预期的。伪类(除了hover)不常用,恐怕也没有过去常用。因此,它没有过去那样有用了。但如果你能收集常用用户的意见,你会发现应该使用它。

传统上,连接文本是蓝色的,已访问的连接是紫色的。也许,这是最有效、最有用的颜色。然而,伴随着CSS的广泛发展,这种颜色不会是平常的了,用户也不再假设连接必须是蓝色或紫色的。

注意

你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是,Internet Explore并不支持。这真是一个极大的烦恼,因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。参考资料

1.

CSS 伪类

.W3Cschool[引用日期2018-04-24]

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值