如何让导航列表首个链接保持下划线，其余仅hover时显示？

你需要调整CSS选择器的精准度，同时通过父容器与子元素的状态组合来实现需求，修改后的完整CSS代码如下：

.nav__links a {
  padding-block: 5px;
  color: var(--text-dark);
  border-bottom: 3px solid transparent;
}

.nav__links a:hover {
  border-color: var(--btn-primary-color);
}

/* 默认第一个导航链接显示下划线 */
.nav__links li:first-child a {
  border-color: var(--btn-primary-color);
}

/* 鼠标悬停其他列表项时，隐藏第一个链接的下划线 */
.nav__links:hover li:first-child:not(:hover) a {
  border-color: transparent;
}

代码说明： #

• .nav__links li:first-child a：之前直接用a:first-child无效，是因为该选择器会匹配每个父元素下的第一个<a>，而这里需要精准定位到第一个<li>内部的<a>，所以通过li:first-child来限定范围，实现默认显示下划线的效果。
• .nav__links:hover li:first-child:not(:hover) a：当整个导航容器处于hover状态（鼠标在导航区域内），且第一个<li>未被hover（鼠标停在其他列表项上）时，将第一个链接的下划线设为透明，达到“hover其他项时第一个链接下划线消失”的要求。

这样就能完全满足你的需求：

• 第一个链接默认始终显示下划线；
• 其他链接仅在鼠标悬停时显示下划线；
• 鼠标移到其他列表项（包括按钮项）时，第一个链接的下划线自动消失，移回第一个列表项时重新显示。

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