SharePoint Online：同CSS类顶部导航项的差异化悬停颜色设置

嘿，刚好之前处理过类似的SharePoint导航样式问题，咱们来一步步解决它～ 既然所有菜单项共用同一个CSS类，我们可以通过CSS伪类/属性选择器来精准定位每个单独的菜单项，下面给你几种实用的方案：

方案1：使用:nth-child()伪类（最快速的纯CSS方案） #

这个方法利用菜单项在列表中的排列顺序来区分，非常适合菜单结构固定的场景。你只需要给每个位置的菜单项单独写样式就行：

/* 第1个导航菜单项的悬停样式 */
.ms-core-listMenu-horizontalBox li.static:nth-child(1) > .ms-core-listMenu-item:hover {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    border-color: #571757; /* 自定义颜色：紫色 */
}

/* 第2个导航菜单项的悬停样式 */
.ms-core-listMenu-horizontalBox li.static:nth-child(2) > .ms-core-listMenu-item:hover {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    border-color: #2E7D32; /* 自定义颜色：绿色 */
}

/* 第3个导航菜单项的悬停样式 */
.ms-core-listMenu-horizontalBox li.static:nth-child(3) > .ms-core-listMenu-item:hover {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    border-color: #1976D2; /* 自定义颜色：蓝色 */
}

优点：纯CSS实现，不需要修改SharePoint任何结构，快速生效；
缺点：如果后续调整了导航菜单的顺序，颜色也会跟着错位，所以适合菜单结构长期不变的情况。

方案2：利用菜单项的链接属性（更稳定的纯CSS方案） #

如果你的导航菜单项的href链接是唯一的（比如包含不同的页面关键词），可以用属性选择器来匹配，这样即使菜单顺序变了，颜色也不会出错：

/* 匹配链接中包含"Home"的菜单项 */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item[href*="Home"]:hover {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    border-color: #571757;
}

/* 匹配链接中包含"Documents"的菜单项 */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item[href*="Documents"]:hover {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    border-color: #2E7D32;
}

优点：不受菜单顺序影响，稳定性更高；
缺点：需要确保每个菜单项的href有唯一的关键词，避免多个菜单项被误匹配。

方案3：给菜单项添加自定义CSS类（最灵活的长期方案） #

如果你有修改SharePoint导航项的权限，可以给每个菜单项添加专属的自定义CSS类，这样后续维护起来最方便。具体操作可以通过：

• 使用SPFx扩展来给导航项注入自定义类；
• 或者通过PowerShell脚本批量添加属性；

添加完自定义类后，直接用类名来写样式：

/* 自定义类为nav-item-home的菜单项悬停样式 */
.ms-core-listMenu-item.nav-item-home:hover {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    border-color: #571757;
}

/* 自定义类为nav-item-docs的菜单项悬停样式 */
.ms-core-listMenu-item.nav-item-docs:hover {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    border-color: #2E7D32;
}

优点：完全不受菜单顺序、链接变化的影响，样式逻辑清晰，长期维护成本低；
缺点：需要有一定的SharePoint开发/管理权限，操作门槛略高。

你可以根据自己的实际场景选择最合适的方案，比如菜单固定就用方案1，菜单可能调整就用方案2，有权限的话方案3是最优解～

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