■常见的伪类有

□动态伪类(dynamic pseudo-classes)              □结构伪类(structural pseudo-classes)

√:link、visited、:hover、:active、:focus          √:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()

□目标伪类(target pseudo-classes)             √:first-child、:last-child、:first-of-type、:

√:targei                                      last-of-type

√:root、:only-child、:only-of-type、:last-

□语言伪类(language pseudo-classes)            of-type

√:lang()

□否定伪类(negation pseudo-classes)

□元素状态伪类(UI element states pseudo-classes)     √:ont()

√:enabled、 :disabled、:checked

动态伪类(dynamic pseudo-classes)

■使用举例

□a:link 未访问的链接

□a:visited 已访问的链接

□a:hover鼠标挪动到链接上

□:active 激活的链接(鼠标在链接上长按住未松开)

■使用注意

□:hover必须放在:link和:visited后面才能完全生效

□:active必须放在:hover后面才能完全生效

□所以建议编写顺序是:link、:bisited、:hover、:active

□记忆:女朋友看到lv后,ha ha 大笑

  • 除了a元素, :hover , :active也能用在其他元素上

动态伪类-:focus

  • :focus指当前拥有输入焦点的元素(能接收键盘 输入)
  • 文本输入框焦点,背景就会变红色

□因为链接a元素可以被键盘的tab键选中聚焦,所以:focus也适用于a元素

  • 动态伪类编写顺序建议为

□:link , :bisited , :focus , :hover , :active

□ 记忆: 女朋友看到lv包包后,(feng)疯一样地ha ha 大笑

伪类(pseudo-classes)相关推荐

  1. CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...

  2. html中伪类定义,伪类

    本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 伪类对元素进行分类是基于特征(characteristics)而不是它们的名字.属性或者内容:原则上特征是不可以从文档树上推断 ...

  3. 伪类(:)和伪元素(::)的区别

    伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,CSS3才对这两个概念做了相对较清晰的概念,下面看看css2和css3中对这两个概念的定义: 伪类 - p ...

  4. img标签的before,after伪类

    在CSS中总有一些你不用不知道,用到才知道的"坑".比如今天要谈的,把 before, after 伪类用在 <img> 标签上. 嗯,实际上你用你会发现,在大多数浏览 ...

  5. js,jq改变cssbefore或after的伪类的样式

    当我们把样式绑定在伪元素上,但是需要通过js调整这个伪类的样式的时候,CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们.这时候操作的方式如下: html: < ...

  6. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...

  7. html链接伪类设置鼠标悬停,链接伪类可以控制超链接的样式吗?是怎样实现的?...

    定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前.点击后和鼠标悬停时的样式不同.在CSS中,通过链接伪类可以实现不同的链接状态,下面将对链接伪类控制超链接的样式进行详 ...

  8. 记录CSS3 target伪类简介

    CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个"#"字符,然后后面带有一 ...

  9. CSS复合选择器(后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器)

    复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器 后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间 ...

  10. css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)

    css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 通配符选择器 标 ...

最新文章

  1. WinDbg配置和使用基础
  2. 【翻译】Programming Ruby——数组,哈希表和控制结构
  3. 为了OFFER,花了几个小时,刷下Leetcode链表算法题
  4. 腾讯云全面更新数据智能服务全景图!
  5. 前展(规划)后延(架设):编码开发程序员的出路之一
  6. 有什么激励你一辈子的句子?
  7. 【单例模式、多例模式、工厂模式和枚举】
  8. 随笔篇----比特的传输
  9. 什么是营销SaaS?
  10. 道创峰会2020:伯克利学生分享会|快来线下碰一碰
  11. webpack优化系列七:首屏加载优化
  12. 极光推送接入-客户端
  13. 自定义jackson解析时间格式yyy-MM-dd HH:mm:ss
  14. 动手实现简易网站目录扫描器(桌面窗口版)——WebScannerTkl
  15. 不把Redis知识点吃透还想面试大厂拿高薪?这份Redis超牛笔记送给你!
  16. JAXB解析XML为对象
  17. 程序内嵌PPT播放及相关控制方法
  18. ubuntu 局域网dns服务器_「bind9」ubuntu下配置bind9为局域网的DNS服务器 - seo实验室...
  19. 在线抠图怎么弄?简单几步轻松操作
  20. 2023 年的电动汽车充电趋势和电动汽车的未来

热门文章

  1. 九鼎实际控制人投资观!
  2. 【高数复盘】2.1导数概念
  3. Python操作wifi进行数据传输
  4. 当居住产业挺进深水区,数字化能衍生出什么机会?
  5. 新书出版:《数字滤波器的MATLAB与FPGA实现——Altera/Verilog版(第2版)》已开始印刷出版
  6. 艾美捷-临床数量排名前20的药物靶点分析-磷酸二酯酶(PDEs)抗体
  7. 微信端input输入框在ios手机上连续输入卡顿
  8. win7自动锁定计算机快捷键,两种方法教你锁定Win7系统电脑计算机快捷键
  9. 高手攻关考试心得:RHCE实战详细经验
  10. RT-Thread学习笔记【网络设备与BSD套接字组件】