选择子标签的伪类选择器

本文详细介绍了CSS中与子标签和类型相关的伪类选择器,包括:`only-child`, `only-of-type`, `first-child`, `last-child`, `first-of-type`, `last-of-type`, `nth-child(n)`, `nth-of-type(n)`, `nth-last-child(n)` 和 `nth-last-of-type(n)`。这些选择器帮助开发者精准地定位和样式化HTML元素,提高网页布局的控制力。" 82728850,6844325,诗经小雅 - 皇皇者华解析,"['诗经文化', '古代文学', '历史文献']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. p:only-child

读作,p标签是的他父标签的唯一个子标签吗?如果是,则被选中,如果不是,则不被选中。换句话说,如果p标签还有同胞标签,那就不符合规则。

2. p:only-of-type

读作, p标签是他的父标签的唯一一个p标签吗?换句话说,这个p标签还可以有其他的同胞标签,但作为p标签来说,他是唯一一个。更简单点,就是只有同胞标签中,只有一个p标签,初次之外,还可以其他的div,span等等其他的标签。

3. p:first-child

读作: p标签是它的父标签的第一个子标签吗?如果某个p标签还有任意同胞标签(也可以还有其他p标签),并且p不是第一个,那么不会被选中,如果是第一个,则会被选中。

4. p:last-child

读作: p标签是它的父标签的最后一个子标签吗?如果某个p标签还有同胞标签,并且p不是最后一个,那么不会被选中,如果是最后一个一个,则会被选中。

5. p:first-of-type

读作: p标签是他的父标签的第一个p标签吗?p标签还可以任意同胞标签,包括p标签本身,但是我只选择第一个p标签。和first-child的区别是,first-child必须是第一个,first-of-type可以不是第一个,我只在同类的p标签中找排第一的那个p。和only-of-type的区别是,only-of-type只能有一个p。

6. p:last-of-type

读作: p标签是他的父标签的最后一个p标签吗?分析同5

7. p:nth-child(n)

读作: p标签的父标签的第n个孩子是p吗?

8. p:nth-of-type(n)

读作: p标签的父标签的第n个p子标签,或者p标签的同胞p标签的第n个。

9. p:nth-last-child(n)

读作: p标签是他的父标签的倒数第n个吗?

10. p:nth-last-of-type(n)

读作: p标签的父标签的倒数第n个p子标签。或者说p标签的p同胞标签中的倒数第n个。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值