CSS常用伪类手册(v1)

299 阅读3分钟

概述

本文章只介绍伪类简单的使用规则,仍在实验中的伪类不会记录在本文章。


一丶交互使用的伪类

1. :active

:active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。

.test:active{color:red}

2. :hover

:hover CSS伪类适用于用户使用指示设备虚指一个元素(没有激活它)的情况。这个样式会被任何与链接相关的伪类重写,像:link:visited, 和 :active等。为了确保生效,:hover规则需要放在:link和:visited规则之后,但是在:active规则之前,按照LVHA的循顺序声明:link-:visited-:hover-:active。

注意: 在触摸屏上 :hover 有问题,基本不可用。不同的浏览器上:hover 伪类表现不同。 可能从不会触发;或者在触摸某元素后触发了一小会儿;或者总是触发即使用户不在触摸了,直到用户触摸别的元素。 触摸屏非常普遍,所以网页开发人员不要让任何内容只能通过悬停才能展示出来,不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

.test:hover{color:blue}

二、伪类选择器

1. :first-child

:first-child  表示在一组兄弟元素中的第一个元素,具体一点,所选的元素(无论多个或单个)是其兄弟元素的一个元素。

.test:first-child{color:red}

2. :first-of-type

:first-of-type 表示一组兄弟元素中相同类型(标签名相同)的第一个元素,与:first-child相似。

.test:first-of-type{color:red}

3. :last-child

:first-child规则相同,只不过是选择一组兄弟元素中的最后一个

4. :last-of-type

:first-of-type规则相同,只不过是选择相同类型的一组兄弟元素中的最后一个

5. :nth-child()

:nth-child(an+b)  这个 CSS 伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)。

  • tr:nth-child(2n+1)- 表示HTML表格中的奇数行。

  • tr:nth-child(odd)- 表示HTML表格中的奇数行。

  • tr:nth-child(2n)- 表示HTML表格中的偶数行。

  • tr:nth-child(even)- 表示HTML表格中的偶数行。

  • span:nth-child(0n+1)- 表示子元素中第一个且为span的元素,与 :first-child 选择器作用相同。

  • span:nth-child(1)- 表示父元素中子元素为第一的并且名字为span的标签被选中

  • span:nth-child(-n+3)- 匹配前三个子元素中的span元素。

6. :nth-last-child(与:nth-child()规则相同,唯一的区别是倒序的)

那就不讲了

7. :nth-of-type

如果没有亲手测试过 nth-child 和 nth-of-type很难分清它们的区别, nth-child(n)表示的当前元素的所有兄弟元素中的第n个,而nth-of-type(n)则会将当前元素的所有兄弟元素以类型分组,n则表示每组的第n个,听起来很难理解,建议亲手试一下,他们有一个非常明显的区别就是,nth-child(n)只会影响一个元素,而nth-of-type(n)有可能会影响多个元素。

.test:nth-of-type(2){color:red}

8 :nth-last-of-type

同上,也是倒过来的概念