:last-child不生效是因为它只匹配父元素最后一个直接子元素，且该元素必须是目标标签；若末尾是div或注释等非li节点，则li:last-child完全不匹配，应改用li:last-of-type。
:last-child 不是“选最后一个 li”或“最后一个 p”的万能解，它只认物理位置——父元素里排在最末尾的那个**直接子元素**，不管它是什么标签。
为什么 li:last-child 有时不生效？
常见错误是误以为它会跳过非 li 元素去找“最后一个 li”。实际逻辑是：先看父元素的子元素列表，取最后一个，再判断它是不是 li。
- 如果父元素最后一个是
div，那li:last-child完全不匹配，哪怕前面有十个li - HTML 结构如
<ul> <li>A</li> <li>B</li> <div>footer</div> </ul>，此时li:last-child无样式生效 - 想稳定选“最后一个
li”，改用li:last-of-type更可靠
tr:last-child 在表格里为什么有时选不到最后一行？
关键看 <tr> 的父容器是不是直接包含它的最后一个子元素。标准表格中，<code><tr> 通常在 <code><tbody> 内，而 <code><tbody> 可能还有 <code><tfoot> 或注释节点。
<ul><li>
<code>tbody tr:last-child：只在 <tbody> 的最后一个子元素恰好是 <code><tr> 时才命中
<li>
<code>tbody > tr:last-of-type：更稳妥，无视中间穿插的 <th>、<code><div> 或空白文本节点
<li>若表格没写 <code><tbody>，浏览器会自动补上，但脚本动态插入内容后结构可能变化，<code>:last-of-type 抗干扰能力更强
去除列表末尾边距时，:last-child 的典型写法
这是最常用也最容易出错的场景：给每个列表项加 margin-bottom，再用 :last-child 把最后一个的 margin 干掉。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
.list-item { margin-bottom: 1rem; } .list-item:last-child { margin-bottom: 0; } - 错误写法：
ul li:last-child { margin-bottom: 0; }—— 如果.list-item是自定义类名，却用li去匹配，会失效 - 注意优先级：如果其他规则带
!important或更具体的选择器（如ul.nav li.active:last-child），可能覆盖掉你的:last-child规则
和 :nth-last-child(1) 有什么区别？
语法上等价，但语义和可维护性不同。
-
:last-child直观表达意图，阅读成本低，适合简单定位 -
:nth-last-child(1)属于通用公式，可轻松改成:nth-last-child(2)（倒数第二个），扩展性好 - 性能无差异，现代浏览器对两者优化一致；但
:nth-last-child(n)在 IE9+ 才支持，而:last-childIE9+ 也支持，IE8 不支持两者 - 真正容易被忽略的是：当父元素有多个类型混排时，
:last-child和:last-of-type行为完全不同，别凭感觉替换
