多级导航子菜单添加底部padding（排除最末子菜单）实现问题

问题原因 #

你写的.sub-menu:not(:last-child)不生效是因为CSS的:last-child选择器的匹配规则是：选中作为父元素的最后一个子元素的目标节点。你代码里所有的.sub-menu都是它所属的li.menu-item-has-children的最后一个子元素（li下先放a标签再放sub-menu，sub-menu是li的最后一个子节点），所以所有.sub-menu都匹配:last-child，:not(:last-child)自然选不到任何元素。

解决方案 #

你可以先给所有子菜单统一加20px底部内边距，再单独把整个导航最末尾的一级菜单下的子菜单的底部内边距设为0即可，不会出现内边距叠加的问题：

/* 给所有子菜单加底部内边距 */
.sub-menu {
  padding-bottom: 20px;
}
/* 选中最外层导航最后一个一级菜单下的所有子菜单，取消底部内边距 */
nav > ul > li:last-of-type .sub-menu {
  padding-bottom: 0;
}

如果想一步到位也可以直接用:not选择器排除：

.sub-menu:not(nav > ul > li:last-of-type .sub-menu) {
  padding-bottom: 20px;
}

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