css3新增伪类有哪些

css3新增伪类有:1、【p:first-of-type】;2、【p:last-of-type】;3、【p:only-of-type】;4、【p:only-child】;5、【p:nth-child(2)】。

css3新增伪类有哪些

(推荐教程:css快速入门)

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

立即学习“前端免费学习笔记(深入)”;

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态

:checked 单选框或复选框被选中

以上就是css3新增伪类有哪些的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615469.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:55:18
下一篇 2025年12月10日 15:10:05

相关推荐

  • CSS3 实现响应式手风琴

    最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ): 视屏教程推荐:《CSS视频教程-玉女心经版》 最终效果如下: 全屏时: 屏幕宽度小于960px时: 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • css3 如何实现进度条效果

    项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用css去实现,优化。 先贴代码: Document *{margin: 0;padding: 0} .box{width: 100px;height: 10px;bord…

    2025年12月24日
    000
  • 10个 你可能不熟悉的 css伪类 及其用例介绍

    css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…

    2025年12月24日 好文分享
    000
  • CSS3中结构性伪类选择器—:first-of-type实现名言标签(代码实例 )

    本文目标: 1、掌握css中结构性伪类选择器—nth-child的用法 问题: 1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—first-of-type 附加说明: 1、整体宽为500 立即学习“前端免费学习笔记(深入)”; 2、每个名言标签的间距为20,内部间距为25,字体为…

    2025年12月24日 好文分享
    000
  • 纯CSS3实现小黄人动画效果

    本篇文章给大家通过介绍一下纯css3实现小黄人动画效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 废话不想多说,我们直接上图和代码最实际。 效果图: 代码如下,复制即可用 立即学习“前端免费学习笔记(深入)”; CSS3实现小黄人 * { margin: 0; padding…

    2025年12月24日
    000
  • 纯css3实现信纸/同学录效果(代码示例)

    实现思路: 网格背景,由css3的线性渐变来实现。 纸上的打孔,由圆和圆柱组成,多个打孔,可以由box-shadow的平铺来实现。 实际代码: 立即学习“前端免费学习笔记(深入)”; Title.bg-grid { height: 400px; padding: 10px; padding-top:…

    2025年12月24日
    000
  • css3常见新特性介绍

    新的元素选择器 E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked,…

    2025年12月24日
    000
  • 适合初学者学习的CSS3实现可爱的动物

    适合初学者学习的CSS3实现可爱的动物 今天,我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。我们将探讨绘制动物的两种技术:一种使用纯HTML和CSS,另一种使用内联SVG背景图像。 此演示高度实验性质——动画SVG滤镜目前仅在Chro…

    2025年12月24日 好文分享
    000
  • CSS3边框阴影实现2种图片列表展示效果-案例解析(代码实例 )

    本文目标: 1、掌握css3中内阴影和外阴影的用法 问题: 1、要求使用纯DIV+CSS实现如下效果 附加说明: 立即学习“前端免费学习笔记(深入)”; 1、效果一中的水平阴影大小为4,垂直阴影为2,模糊度为6 2、效果二中的水平阴影为0,垂直阴影为0,模糊度30 3、整体宽度为800px,居中显示…

    2025年12月24日 好文分享
    000
  • CSS3线性渐变实现4圆环相连(代码实例)

    本文目标: 1、掌握css3中线性渐变(linear-gradient)的实现方法 问题: 要求实现以下效果,使用纯DIV+CSS,必须使用知识点 线性渐变(linear-gradient),且居中显示 附加说明: 1、一个彩色圆环的大小是400px*400px,里面空白圆环大小为260px*260…

    2025年12月24日 好文分享
    000
  • CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )

    本文目标: 1、掌握文本带省略号的显示效果 问题: 1、实现以下效果,要求使用纯DIV+CSS,不适用任何框架 附加说明 1、总体宽度是500px,在页面中居中显示 立即学习“前端免费学习笔记(深入)”; 2、标题字体大小是22px,其他字体是16px 3、超级开心果作者的名称靠最左,时间2天前显示…

    2025年12月24日 好文分享
    000
  • CSS3中text-shadow实现文字阴影效果(代码实例 )

    本文目标: 1、掌握text-shadow的用法 问题: 使用纯div+css实现以下效果 附加说明: 1、文字总共有4个分别是:Belive Yourself You Can 立即学习“前端免费学习笔记(深入)”; 2、文字大小为86px 3、右边文字和左边文字的间距为20px 4、图片大小 宽为…

    2025年12月24日
    000
  • CSS3中background-orgin实现带相框照片显示效果-案例解析(代码实例 )

    本文目标: 1、掌握background-origin背景原点的使用 问题: 1、实现以下效果,使用纯DIV+CSS,必须使用背景原点background-orgin 附加说明: 立即学习“前端免费学习笔记(深入)”; 1、每个相框宽500px,高500px,其中border宽20px,里面文字pa…

    2025年12月24日 好文分享
    000
  • CSS3中background-clip实现图片裁切3种效果(代码实例 )

    本文目标: 1、掌握background-clip背景裁切的3种实现 问题: 要求实现以下效果,使用纯DIV+CSS,必须使用background-clip 附加说明: 立即学习“前端免费学习笔记(深入)”; 1、相框宽度为500px,高500px,其中border宽20px,里面文字padding…

    2025年12月24日
    000
  • CSS3中background-size实现背景图片大小可自定义的几种效果(代码实例 )

    本文目标: 1、掌握background-size背景图片大小的几种设置方法 问题: 1、实现以下效果,使用纯DIV+CSS,必须使用background-size 附加说明: 1、背景图片大小本身是500*300大小 立即学习“前端免费学习笔记(深入)”; 2、div容器宽度600*300大小 3…

    2025年12月24日
    000
  • CSS3中background-image实现多背景图片(代码实例)

    本文目标: 1、掌握background-image多背景的实现 问题: 1、实现以下效果,使用纯DIV+CSS,必须使用background-image 附加说明: 1、整体宽度是1000px,高300px,要求页面居中显示 立即学习“前端免费学习笔记(深入)”; 2、背景图片宽,高均为300px…

    2025年12月24日 好文分享
    000
  • CSS3属性选择器的几种用法(代码实例)

    本文目标: 1、掌握css3中属性选择器几种用法 问题: 1、要求使用div+css实现以下效果,但是要求css文件中全部使用属性选择器来设置元素样式 附加说明: 1、整个div宽为850,要求在页面中居中显示 立即学习“前端免费学习笔记(深入)”; 2、标题大小为28,加粗显示 3、其他字体14p…

    2025年12月24日
    000
  • CSS3圆角边框实现百度首页搜索界面效果-案例解析(代码实例 )

    本文目标: 1、掌握css3中border-radius的用法 问题: 实现以下界面效果,(不要求实现搜索功能),要求不使用任何框架,纯div+css3,同时必须使用border-radius知识点 其他说明: 立即学习“前端免费学习笔记(深入)”; 1、整个宽度是800x,要求居中显示 2、log…

    2025年12月24日 好文分享
    000
  • svg+css3实现动感的波浪效果

    本篇文章通过代码实例给大家介绍一下svg+css3实现动感的波浪效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 一根矢量的波浪 完整代码: .circle-countdown { width: 441px; height: 441px; position: relative;…

    2025年12月24日
    000
  • CSS3 flex布局总结

    css3 flex布局总结 2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信