ul内嵌套div导致:first-child选择器无法匹配首个li的纯CSS解决方案求助

你使用的:first-child选择器匹配规则为「父元素的第一个子元素，且子元素标签为li」，当前ul的第一个子元素是div，所以该选择器无法命中目标li元素。

将选择器中的:first-child替换为:first-of-type即可，:first-of-type的匹配规则为「父元素下同类型标签的第一个元素」，不会被其他类型的前置元素干扰。

修改后的代码如下：

ul.tab-list li:first-of-type img{
     max-width: 145px;
     height: 59px;
}

拓展说明 #

如果后续需要匹配第N个li元素，可以使用:nth-of-type(N)选择器，比如匹配第二个li可写为ul.tab-list li:nth-of-type(2)，同样不受ul内插入的div元素影响。该类选择器兼容所有现代浏览器及IE9以上版本，适配绝大多数业务场景。

内容的提问来源于stack exchange，提问作者Bharathi Dhasan.S