first-child、last-child
很多人对last-child和first-child选择器有着很深的误会,以为匹配的是“所有符合匹配规则(:之前)的平级元素中的第一\最后一个”。
实际上fitst-child、last-child的匹配规则是这样的:
- 找到符合:之前选择器匹配规则的元素
- 找到元素的全部平级元素中的第一个或最后一个
- 判断第一个或最后一个元素时候符合:之前选择器的匹配规则
div1p1
p2
div2p:first-child {
什么也没有匹配到,因为p1不是first-child,div1又不是p元素
}
p:last-child {
什么也没有匹配到,与p:first-child一个道理
}
.div:first-child {
匹配到div1
}
.div:last-child {
匹配到div2
}
【first-child、last-child】线上例子:https://jsfiddle.net/ndNovaDev/7j151x6x/4/
推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明,是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 七老修复好敏感、角质层薄、红血丝
- 华为旁!大社区、地铁新盘,佳兆业城市广场五期!
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 螃蟹和这些食物同吃,轻则腹泻、重则中毒!要小心哦~
- 八、「料理风云」