温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中常用的伪类选择器有哪些

发布时间:2022-03-18 11:43:36 来源:亿速云 阅读:451 作者:小新 栏目:开发技术

这篇文章主要为大家展示了“css中常用的伪类选择器有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中常用的伪类选择器有哪些”这篇文章吧。

伪类选择器是 CSS 样式表中重要的内容之一。那么这篇文章中 w3cschool 小编来为大家介绍下伪类是什么,常用的伪类选择器有哪些。

伪类是什么?

CSS 伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和 class 有些类似,但它是基于文档之外的抽象,所以叫伪类。

常用的伪类选择器有哪些?

动态伪类选择器
  • :link。元素被定义了超链接但并未被访问过

  • :visited。元素被定义了超链接并已被访问过

  • :active。元素被激活

  • :hover。鼠标悬停

  • :focus。元素获取焦点

在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后;a:active 必须被置于 a:hover 之后。所以,a 标签的这四种伪类选择器的顺序为:a:link ,a:visited,a:hover ,a:active。必须严格按照此规则来设置属性,否则无效。

UI 元素状态伪类选择器
  • :checked。选中的复选按钮或者单选按钮表单元素

  • :enabled。所有启用的表单元素

  • :disabled。所有禁用的表单元素

UI 元素状态伪类选择器主要是针对 Form 表单元素进行操作,最常见的使用方式如设置 "type="text" 有 enable 和 disabled 两种状态,enable 为可写状态,disabled 为不可状态。

结构伪类选择器
  • :fisrt-child。父元素的第一个子元素

  • :last-child。父元素的最后一个子元素的元素

  • :root。元素所在文档的根元素。在 HTML 文档中,根元素始终是 html,此时该选择器与 html 类型选择器匹配的内容相同

  • :nth-child(n)。父元素的第 n 个子元素。其中 n 可以是整数(1,2,3)、关键字(even,odd)、也可以是公式(2n+1),而且 n 值起始值为 1,而不是 0。

  • :nth-last-child(n):父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反,但使用方法都是一样的,其中 :nth-last-child(1) 始终匹配最后一个元素,与 last-child 等同。

  • :nth-of-type(n) 。父元素内具有指定类型的第 n 个元素

  • :nth-last-of-type(n)。父元素内具有指定类型的倒数第 n 个元素

  • :first-of-type。父元素内具有指定类型的第一个元素,与 nth-of-type(1) 等同

  • :last-of-tye 。父元素内具有指定类型的最后一个元素,与 :nth-last-of-type(1) 等同

  • :only-child 。父元素只包含一个子元素,且该子元素匹配元素

  • :only-of-type。选择父元素只包含一个同类型子元素,且该子元素匹配选择元素

  • :empty。选择没有子元素的元素,而且该元素也不包含任何文本节点

使用结构伪类选择器的好处是可以根据元素在文档中所处的位置,来动态地选择元素,从而减少 HTML 文档对 id 或类的依赖,有助于保持代码干净整洁。
另外需要注意的是,在结构伪类选择器中,子元素的序号是从 1 开始的。

否定伪类选择器
  • E:not(F)。选择所有除元素 F 外的 E 元素

以上是“css中常用的伪类选择器有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI