css伪类选择器的查找顺序

当伪类选择器last-child、first-child无效时，就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败。

先给出一段dom

<body>
    <div>第一个div<div>
    <p>第一个p</p>
    <div>第二个div</div>
    <p>第一个p</p>
</body>

伪类选择器的查找顺序

例：

element:first-child{}

　　通过element确定父元素body

　　通过父元素确定所有子元素

　　找到第一个子元素后再与element匹配（如果类型不匹配，那该选择器无效）

p:first-child{}//无效
div:last-child()//无效

所以当该元素的兄弟元素不相同时推荐使用nth-child()来确定某一元素

posted @ 2019-05-22 15:18 攻城狮？阅读(498) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人

昵称：攻城狮？
园龄： 6年1个月
粉丝： 2
关注： 2

2025年3月

日

一

二

三

四

五

六

攻城狮？