如何让导航栏中当前页面的按钮显示不同颜色和形状？

• 先明确：CSS没有原生current属性，:active伪类仅在元素被点击瞬间生效，这俩都没法实现“当前页面导航项持续高亮”的需求。
• 正确实现步骤：
  1. 给当前页面对应的导航链接手动加自定义类，比如class="current"，示例：

     <a href="index.html" class="current">首页</a>
     

  2. 在CSS中针对这个类编写样式，示例：

     .current {
       background-color: #2563eb; /* 自定义背景色 */
       border-radius: 6px; /* 自定义形状，比如圆角 */
       color: #ffffff; /* 文字颜色 */
       padding: 8px 12px; /* 调整内边距适配形状 */
     }
     

• Replit环境排查要点：
  • 确认每个页面都正确引入了style.css，路径错误会导致样式不加载
  • 用浏览器开发者工具（F12）检查元素样式，看.current规则是否被其他样式覆盖
  • 强制刷新页面（Ctrl+F5），清除Replit的缓存，避免加载旧的CSS文件

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