CSS中:first-child生效但:last-child无效的原因咨询

这俩选择器的核心逻辑差异，就是你遇到问题的根源：

1. :last-child的生效条件 #

:last-child 选中的元素必须同时满足两个条件：

• 它是父元素的最后一个子元素（不管是什么类型）
• 它匹配前面的选择器（这里就是.btn类）

你的代码里，<body>标签看起来只有两个<button>子元素，但浏览器解析HTML时，会把标签之间的空白字符（换行、空格）解析成文本节点，成为<body>的子元素。这种情况下，<body>的最后一个子元素其实是末尾的空白文本节点，而非第二个.btn按钮——文本节点没有.btn类，所以.btn:last-child根本匹配不到任何元素，自然失效。

2. :last-of-type的生效条件 #

:last-of-type 的逻辑更宽松，它只要求：

• 元素是父元素下同类型元素中的最后一个（这里类型是<button>）
• 同时匹配前面的选择器（.btn类）

不管<body>里有没有空白文本节点，第二个<button>都是所有<button>类型元素里的最后一个，且它带有.btn类，所以.btn:last-of-type能精准选中它，功能正常。

验证方法 #

打开浏览器开发者工具（F12），查看<body>的子元素列表，你会看到除了两个<button>，还有几个空白文本节点——这就是导致:last-child失效的直接原因。

内容的提问来源于stack exchange，提问作者yashlodhi