CSS如何选中子元素为不同导航项分别设置对应前置图标

问题根因 #

你当前代码失效主要是以下3个常见原因：

• nth-child选择器逻辑问题：nth-child(n)是选中父元素下所有类型子元素的第n个，如果你的.shop-menu下除了.mobile-nav__link还有其他标签元素（比如分隔线、空白文本节点、提示标签等），就会匹配不到正确的导航项
• 父元素未设置相对定位：伪元素用了position: absolute，如果父级.mobile-nav__link没有设置position: relative，所有伪元素都会相对于更上层的父元素定位，重叠在同一个位置，看起来只显示第一个图标
• 资源路径错误：第一个图标路径是绝对路径/files/xxx，后面3个都是相对路径files/xxx，如果当前页面不是站点根目录，后面3个图标会加载失败

修复方案 #

第一步：替换选择器 #

把nth-child换成nth-of-type(n)，这个选择器只会选中同类型标签的第n个，避免其他子元素干扰。如果导航项是嵌套在列表项内的，也可以调整层级匹配父列表的第n个子元素，匹配准确率更高。

第二步：给导航链接加相对定位 #

保证伪元素相对于当前导航项定位，不会出现多个图标重叠的问题。

第三步：统一资源路径 #

所有图标路径保持一致的绝对路径写法，避免加载失败。

修正后代码 #

/* 公共样式抽离，减少重复代码 */
.shop-menu .mobile-nav__link {
  position: relative;
  padding-left: 2.5em; /* 给图标预留位置，避免文字和图标重叠 */
}
.shop-menu .mobile-nav__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2em;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  background-size: contain;
}

/* 单独给每个导航项设置不同图标 */
.shop-menu .mobile-nav__link:nth-of-type(1)::before {
  background-image: url("/files/NewArrivalsIcon.png?v=1635225557");
}
.shop-menu .mobile-nav__link:nth-of-type(2)::before {
  background-image: url("/files/AnimalPrintsIcon.png?v=1635225557");
}
.shop-menu .mobile-nav__link:nth-of-type(3)::before {
  background-image: url("/files/Under500Icon.png?v=1635225557");
}
.shop-menu .mobile-nav__link:nth-of-type(4)::before {
  background-image: url("/files/NewArrivalsIcon.png?v=1635225557");
}

额外排查项 #

如果修改后还是不生效，可以按以下顺序排查：

• 打开浏览器控制台的网络面板，确认后面3个图标是否返回200状态，有没有加载失败
• 右键点击导航项检查元素，看对应的伪元素样式是否被其他更高优先级的样式覆盖
• 强制刷新页面（Ctrl+F5）清除CSS缓存重试

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