争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

CSS3中增加的伪类有哪一些及其作用是什么?

时间:2024/3/25作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于CSS3中增加的伪类有哪些及其作用是什么?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1. 伪类与伪元素

CSS伪类:用于向某些选择器添加特殊的效果。

CSS伪元素:用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

伪元素作用
::first-letter将样式添加到文本的首字母
::first-line将样式添加到文本的首行
::before在某元素之前插入某些内容
::after在某元素之后插入某些内容

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

CSS3为了区分伪类和伪元素,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。不过浏览器需要同时支持旧的已经存在的伪元素写法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

2、CSS3新增伪类

新增伪类作用
p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child选择属于其父元素唯一的子元素的每个<p>元素。
p:nth-child(n)选择属于其父元素的第n个子元素的每个<p>元素。
p:nth-last-child(n)选择属于其父元素的倒数第n个子元素的每个<p>元素。
p:nth-of-type(n)选择属于其父元素第n个<p>元素的每个<p>元素。
p:nth-last-of-type(n) 选择属于其父元素倒数第n个<p>元素的每个<p>元素。
p:last-child选择属于其父元素最后一个子元素的每个<p>元素。
p:empty选择没有子元素的每个<p>元素(包括文本节点)。
p:target 选择当前活动的<p>元素。
:not(p)选择非<p>元素的每个元素。
:enabled控制表单控件的可用状态。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
伪类作用
:hover将样式添加到鼠标悬浮的元素
:active将样式添加到被激活的元素
:focus将样式添加到获得焦点的元素
:link将样式添加到未被访问过的链接
:visited将样式添加到被访问过的链接
:first-child将样式添加到元素的第一个子元素
:lang定义指定的元素中使用的语言

相关推荐:

css选择器有哪些类型?css常用选择器的简单介绍

什么是css?css三种样式以及文字属性的介绍

以上就是CSS3中增加的伪类有哪些及其作用是什么?的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:CSS3中增加的伪类有哪些及其作用是啥?




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版