伪类的分类

描述

伪类包含两种:状态伪类和结构性伪类

表格1.1(结构性)伪类选择器

序号 属性 作用
1 :first-child 选择元素的第一个子元素
2 :last-child 选择某个元素的最后一个子元素
3 :nth-child() 选择某个元素的一个或多个特定的子元素
4 :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算
5 :first-of-type 选择一个上级元素下的第一个同类子元素

讲解

:first-child 选择器匹配其父元素中的第一个子元素。例如,匹配父元素body的第一个<p>元素并将其背景颜色设置成黄色:

p:first-child {
    background-color:yellow;
}

需要注意的是,如果在这个p元素的前面添加其他元素(不包括p元素本身),将会使这个样式失效,因为此时这个p元素已经不能算是父元素下的第一个元素了。

当然,这样的情况可以避免: :first-of-type 选择器可以匹配其父级元素下特定类型的第一个子元素。

提示: 和 :nth-of-type(1) 是一个意思。

当使用:first-of-type 选择器时,即使父元素下第一个子元素并非是所选的那个元素,只要其类型是选定的类型,那么样式依然有效,例如:

p:first-of-type {
    background: red;
}

此时,只要父元素下第一个子元素仍然是所选的p元素,那么样式有效。

 

:last-child选择器用来匹配父元素中最后一个子元素。

提示: p:last-child等同于p:nth-last-child(1)。

例如,指定父元素中最后一个p元素的背景色:

p:last-child {
    background: red;
}

相同地,如果最后一个子元素并非是自己所指定的那个元素。可以将其改写成:

p:last-of-type {
background: red;
}

:last-of-type选择器匹配其父级元素是特定类型的最后一个子元素。

提示: 和:nth-last-of-type(1)是一个意思。

:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。

n 可以是一个数字,一个关键字,或者一个公式。例如: 指定每个 p 元素匹配的父元素中第 2 个子元素的背景色:

p:nth-child(2) {
    background: red;
}

:nth-last-child()选择器匹配父元素中的倒数第n个子元素。例如,指定每个p元素匹配的父元素中的倒数第2个子元素背景色:

p:nth-last-child(2) {
    background: red;
}

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。n可以是一个数字,一个关键字,或者一个公式。例如,指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色:

p:nth-of-type(2) {
    background: red;
}

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。n 可以是一个数字,一个关键字,或者一个公式。例如,指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色:

p:nth-last-of-type(2) {
    background: red;
}

人已赞赏
CSS笔记

伪类样式

2020-2-4 11:35:43

CSS笔记

伪类和伪元素的区别

2020-2-4 13:04:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索