如何使用JavaScript正确获取列表最后一个外层li元素？

问题原因 #

你原先的选择器使用的是后代选择器（空格分隔元素），会匹配所有层级的嵌套元素：

• .abc ul 会选中.abc容器内所有的ul，包括嵌套在li内部的子级ul
• li:last-child 会匹配所有ul下的最后一个li元素，querySelector默认返回第一个匹配到的元素，也就是第一个子ul里的<li>1.2</li>，和你的预期不符。

修正方案 #

使用直接子选择器> 限制匹配层级，只选中顶级ul的直接子li元素，再取最后一个即可：

console.log(document.querySelector('.abc > ul > li:last-child').innerHTML)

补充说明 #

你当前的HTML结构不符合规范：ul的直接子元素只能是li，嵌套的子ul建议放到父级li内部，避免后续出现更多选择器匹配异常的问题。

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