热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

css3伪类和伪元素你都懂了吗

什么是伪类?伪类用于定义元素的特殊状态。例如,它可用于:当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代

什么是伪类?

伪类用于定义元素的特殊状态。 例如,它可用于:

  • 当用户将鼠标悬停在元素上时为其设置样式
  • 访问和未访问的链接不同样式
  • 在获得焦点时设置元素的样式

伪类的语法

后代选择器匹配作为指定元素后代的所有元素。以下示例选择

元素内的所有

元素:

选择器:伪类 { 属性:值; }

链接可以以不同方式显示:

/* 未访问的链接 */ 
a:link {   color: red; } 
/* 已浏览过的链接 */
 a:visited {   color: green; } 
/* 鼠标悬停时候的链接 */ 
a:hover {   color: hotpink; }
 /* 选定的链接 */ 
a:active {   color: blue; }

 

注意:a:hover必须在CSS定义a:link之后和a:visited之后才能生效!a:active必须 a:hover在CSS定义之后才能有效!伪类名称不区分大小写。

伪类和CSS类

伪类可以与CSS类结合使用:当您将鼠标悬停在示例中的链接上时,它将更改颜色:

a.highlight:hover { color: #ff0000; }

将鼠标悬停在

:hover在

元素上使用伪类的示例:

div:hover { background-color: blue; }

简单的工具提示悬停

将鼠标悬停在

元素上以显示

元素(如工具提示)

p {display: none;background-color: yellow;padding: 20px; } 
div:hover p {display: block; }

:first-child伪类

:first-child伪类指定的元素是另一个元素的第一个子匹配。 在以下示例中,选择器匹配任何元素的第一个子元素

元素:

p:first-child { color: blue; }

匹配所有

元素中的第一个元素

p i:first-child { color: blue; }

匹配所有第一个子

元素中的所有元素

p:first-child i { color: blue; }

:lang伪类

:lang伪类允许定义不同语言的特殊规则。在下面的示例中,:lang使用lang=“no”定义元素的引用:

q:lang(no) { quotes: "~" "~"; }

所有CSS伪类
选择器 例子 描述
:active a:active 选择active激活链接
:checked input:checked 选择每个选中的元素
:disabled input:disabled 选择每个禁用的元素
:empty p:empty 选择每个没有子元素的

元素

:enabled input:enabled 选择每个启用的元素
:first-child p:first-child 选择作为其父级的第一个子元素的每个

元素

:first-of-type p:first-of-type 选择每个

元素,它是其父元素的第一个

元素

:focus input:focus 选择具有焦点的元素
:hover a:hover 选择鼠标悬停时的链接
:in-range input:in-range 选择具有指定范围内的值的元素
:invalid input:invalid 选择具有无效值的所有元素
:lang(language) p:lang(it) 选择具有以“it”开头的lang属性值的每个

元素

:last-child p:last-child 选择作为其父级的最后一个子元素的每个

元素

:last-of-type p:last-of-type 选择每个

元素,它是其父元素的最后一个

元素

:link a:link 选择所有未访问的链接
:not(selector) :not(p) 选择不是

元素的每个元素

:nth-child(n) p:nth-child(2) 选择作为其父级的第二个子元素的每个

元素

:nth-last-child(n) p:nth-last-child(2) 选择每个

元素作为其父元素的第二个子元素,从最后一个子元素开始计算

:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个

元素作为其父元素的第二个

元素,从最后一个子元素开始计算

:nth-of-type(n) p:nth-of-type(2) 选择每个

元素,它是其父元素的第二个

元素

:only-of-type p:only-of-type 选择每个

元素,它是其父元素的唯一

元素

:only-child p:only-child 选择每个

元素,它是其父元素的唯一子元素

:optional input:optional 选择没有“required”属性的元素
:out-of-range input:out-of-range 选择元素,其值超出指定范围
:read-only input:read-only 选择具有指定“readonly”属性的元素
:read-write input:read-write 选择没有“readonly”属性的元素
:required input:required 选择指定了“required”属性的元素
:root root 选择文档的根元素
:target #news:target 选择当前活动的#news元素(单击包含该锚名称的URL)
:valid input:valid 选择具有有效值的所有元素
:visited a:visited 选择所有访问过的链接

所有CSS伪元素
选择器 例子 描述
::after p::after 在每个

元素后插入内容

::before p::before 在每个

元素之前插入内容

::first-letter p::first-letter 选择每个

元素的第一个字母

::first-line p::first-line 选择每个

元素的第一行

::selection p::selection 选择用户选择的元素部分

推荐阅读
  • Problemexplanation: ... [详细]
  • 本篇文章为大家展示了input语句的作用有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。HTML标签 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文详细介绍了如何使用MySQL来显示SQL语句的执行时间,并通过MySQL Query Profiler获取CPU和内存使用量以及系统锁和表锁的时间。同时介绍了效能分析的三种方法:瓶颈分析、工作负载分析和基于比率的分析。 ... [详细]
  • 本文介绍了在iOS开发中使用UITextField实现字符限制的方法,包括利用代理方法和使用BNTextField-Limit库的实现策略。通过这些方法,开发者可以方便地限制UITextField的字符个数和输入规则。 ... [详细]
  • WPF之Binding初探
      初学wpf,经常被Binding搞晕,以下记录写Binding的基础。首先,盗用张图。这图形象的说明了Binding的机理。对于Binding,意思是数据绑定,基本用法是:1、 ... [详细]
  • TerraformVersionTerraformv0.9.11AffectedResource(s)Pleas ... [详细]
  • 点击后defaultEducation的值明明改变了,但props传给子组件却watch不到 ... [详细]
  • Server Installation for Jitsi Meet
    2019独角兽企业重金招聘Python工程师标准ServerInstallationforJitsiMeetThisdescribesconfiguringaserverji ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • springmvc学习笔记(十):控制器业务方法中通过注解实现封装Javabean接收表单提交的数据
    本文介绍了在springmvc学习笔记系列的第十篇中,控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时,如何将其交给同一个控制器处理。 ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 安装oracle软件1创建用户组、用户和目录bjdb节点下:[rootnode1]#groupadd-g200oinstall[rootnode1]#groupad ... [详细]

author-avatar
双豆儿_668
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有