CSS3中增加的伪类有哪些及其作用是什么?
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS3中增加的伪类有哪些及其作用是什么?,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2259字,纯文字阅读大概需要4分钟。
内容图文
![CSS3中增加的伪类有哪些及其作用是什么?](/upload/InfoBanner/zyjiaocheng/412/fdc347aef94540748832e0404cd189ae.jpg)
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中增加的伪类有哪些及其作用是什么?的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS3中增加的伪类有哪些及其作用是什么?全部内容,希望文章能够帮你解决CSS3中增加的伪类有哪些及其作用是什么?所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。