纯css导航选中高亮

基础概念

纯CSS导航选中高亮是指使用CSS来实现导航栏中当前选中项的高亮显示效果。这种效果通常用于突出显示用户当前所在的页面或功能模块。

类型

基于类名的高亮：通过添加或移除类名来实现高亮效果。
基于伪类的高亮：使用:hover、:active、:focus等伪类来实现高亮效果。
基于URL匹配的高亮：通过匹配当前URL与导航项的链接来实现高亮效果。

应用场景

适用于各种网页导航栏，如网站顶部导航、侧边栏导航等。

示例代码

以下是一个基于伪类的纯CSS导航选中高亮示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS导航选中高亮</title>
    <style>
        .nav {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .nav li {
            margin-right: 20px;
        }
        .nav a {
            text-decoration: none;
            color: #333;
        }
        .nav a:hover,
        .nav a:focus {
            color: #f00;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</body>
</html>

参考链接

MDN Web Docs - CSS Selectors

常见问题及解决方法

高亮效果不明显：检查CSS选择器是否正确，确保高亮样式没有被其他样式覆盖。
高亮效果不持久：如果是基于伪类的高亮，确保用户交互（如鼠标悬停、点击）能够触发高亮效果。
URL匹配高亮不准确：可以使用JavaScript辅助实现更精确的URL匹配高亮效果。

解决方案

如果需要更复杂的选中高亮逻辑，可以结合JavaScript来实现。例如，通过监听路由变化来动态添加或移除高亮类名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS导航选中高亮</title>
    <style>
        .nav {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .nav li {
            margin-right: 20px;
        }
        .nav a {
            text-decoration: none;
            color: #333;
        }
        .active {
            color: #f00;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#home" class="active">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>

    <script>
        const links = document.querySelectorAll('.nav a');
        const currentPath = window.location.hash;

        links.forEach(link => {
            if (link.getAttribute('href') === currentPath) {
                link.classList.add('active');
            }
        });
    </script>
</body>
</html>

通过这种方式，可以实现更精确的导航选中高亮效果。