为何移除<li>内偶数位<span>下边框的CSS选择器不生效？

嘿，我来帮你拆解一下这个选择器失效的原因～

你当前用的选择器 .smallnav-item span:nth-child(2n+2) 的逻辑是：在每个.smallnav-item元素的子元素中，选取第2、4、6…个且是<span>的元素。但看你的HTML结构，每个.smallnav-item（也就是<li>标签）里面只包含1个<span>，根本不存在第2个及以后的子元素，这个选择器自然匹配不到任何元素，所以样式不会生效。

正确的写法 #

你需要先选中偶数位置的.smallnav-item（也就是第2、4个<li>），再选中它内部的<span>，这样就能精准定位到目标元素了。推荐两种写法：

1. 使用nth-child(even)（更直观，表示选中偶数位置的元素）：

.smallnav-item:nth-child(even) span {
  border-bottom: none;
}

2. 使用nth-child(2n)（和2n+2效果一致，但更简洁，从第2个元素开始，每隔1个选一个）：

.smallnav-item:nth-child(2n) span {
  border-bottom: none;
}

这样修改后，第2、4个<li>里的<span>就会去掉底部边框啦～

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