css伪类的种类有哪些?

无论您是初学者还是经验丰富的CSS开发人员,您都可能听说过伪类。最着名的伪类可能是:hover,当指针设备(例如鼠标)指向它时,它允许我们在处于悬停状态时对元素进行样式化。

什么是伪类?

一个伪类是我们可以为了增加CSS选择一个关键字定义一个特殊状态的属于HTML元素。我们可以使用冒号语法 将伪类添加到CSS选择器,:如下所示:a:hover{ ... }

一个CSS类是我们可以添加到HTML我们想申请,同一款式的规则元素,例如顶部菜单项或侧边栏小工具的标题属性。换句话说,我们可以使用CSS类对以某种方式相似的HTML元素进行分组或分类。

伪类与它们类似,因为它们也用于将样式规则添加到共享相同特征的元素。

但是,虽然真正的类是用户定义的并且可以在源代码中被发现,但是例如,基于所属的HTML元素的当前状态,UA(用户代理)(例如web浏览器)添加<div class="myClass">伪类。

伪类和伪元素可以在CSS选择器中使用,但在HTML源代码中不存在。相反,它们在某些条件下由UA“插入”以用于在样式表中寻址。

CSS伪类分两种:

  • UI伪类:会在HTML元素处于某种状态时(比如鼠标指针位于连接上),为该元素应用CSS样式。

  • 结构化伪类:会在标记中存在某种结构上的关系时(如某个元素时一组元素中的第一个或最后一个),为响应元素应用CSS样式。

UI伪类:最常用的UI伪类元素是链接(a元素)

UI伪类分为三种:

1、链接伪类:共有四个,链接始终会处于四种状态之一

  • Link 链接就在那儿等着用户点击。

  • Visited 用户此前点击过这个链接。

  • Hover 鼠标指针正悬停在链接上。

  • Active 链接正在被点击。

2、focus伪类(聚焦)

3、target伪类(如果用户点击一个纸箱页面中其他元素的链接,则那个元素就是目标(target),可以用:target伪类选中它。)

结构化伪类:

结构伪类,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。

  • E:last-child 选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1)

  • E:nth-child(n) 选择父元素的第n个子元素,n从1开始计算

  • E:nth-last-child(n) 选择父元素的倒数第n个子元素,n从1开始计算

  • E:first-of-type 选择父元素下同种标签的第一个元素,相当于E:nth-of-type(1)

  • E:last-of-type 选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1)

  • E:nth-of-type(n) 与:nth-child(n)作用类似,用作选择使用同种标签的第n个元素

  • E:nth-last-of-type 与:nth-last-child作用类似,用作选择同种标签的倒数第一个元素

  • E:only-child 选择父元素下仅有的一个子元素,相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)

  • E:only-of-type 选择父元素下使用同种标签的唯一子元素,相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)

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

  • E:root 选择文档的根元素,对于HTML文档,根元素永远HTML

更多前端开发知识,请查阅 HTML中文网 !!

以上就是css伪类的种类有哪些?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏