
本文解析 `:last-of-type` 的实际匹配逻辑——它按 html 元素类型(如 `div`、`nav`)而非 css 类名筛选,因此在嵌套 `div` 结构中无法精准选中 `.sub` 类的最后一个直接子元素;而换用语义化标签(如 `nav`)可规避该限制,并提供纯 css 替代方案。
:last-of-type 是一个基于元素类型(tag name)的伪类,而非基于类名或任意选择器。它的作用是:在同级兄弟元素中,选出最后出现的指定标签类型(例如 div),再进一步检查该元素是否匹配前置选择器(如 .sub)。这意味着 .sub:last-of-type 实际等价于:
“在当前父容器的直接子元素中,找出所有 标签,取其中最后一个 ,再判断它是否同时拥有 class="sub"”。
为什么 中失效,而