如何用伪元素切换导航栏样式类？无JS实现需求

问题说明 #

当前导航栏所有选项均为浅灰色背景，期望点击某一导航项后，该项保持白色背景的高亮状态，要求不使用JavaScript实现。

现有HTML代码 #

<div class="navbar-container">
    <div class="navbar-wrapper">
        <div class="text-radius home-radius">
            <p><a href="#" class="nav-anchor">Home</a></p>
        </div>
        <div class="text-radius profile-radius">
            <p><a href="#profile" class="nav-anchor">Profile</a></p>
        </div>
        <div class="text-radius contact-radius">
            <p><a href="#contact" class="nav-anchor">Contact</a></p>
        </div>
    </div>
</div>

现有CSS代码 #

.navbar-container {
    display: flex;
    justify-content: center;
}

.navbar-wrapper {
    font-size: 13px;
    margin: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5em;
    background-color: var(--lightgrey);
    width: 18.8em;
    height: 3em;
}

.nav-anchor {
    text-decoration: none;
    color: var(--black);
}

.text-radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8em;
    height: 2.5em;
    border-radius: 5em;
}

.home-radius:active {
    background-color: var(--white);
}

.profile-radius:active {
    background-color: var(--white);
}

.contact-radius:active {
    background-color: var(--white);
}

已尝试方案 #

• 使用:active、:focus和:target伪类，均未实现持久高亮效果

解决方案 #

核心是利用CSS的:target伪类，通过调整HTML结构让锚点与导航项容器关联：

步骤1：修改HTML结构 #

给每个导航项容器添加对应id，同时修正Home的锚点指向（避免默认跳转到页面顶部）：

<div class="navbar-container">
    <div class="navbar-wrapper">
        <div class="text-radius home-radius" id="home">
            <p><a href="#home" class="nav-anchor">Home</a></p>
        </div>
        <div class="text-radius profile-radius" id="profile">
            <p><a href="#profile" class="nav-anchor">Profile</a></p>
        </div>
        <div class="text-radius contact-radius" id="contact">
            <p><a href="#contact" class="nav-anchor">Contact</a></p>
        </div>
    </div>
</div>

步骤2：调整CSS样式 #

替换原有的:active伪类为:target，确保点击后容器保持白色背景：

/* 移除原:active样式，替换为以下代码 */
.home-radius:target,
.profile-radius:target,
.contact-radius:target {
    background-color: var(--white);
}

/* 可选：给Home设置初始高亮（若需要默认选中状态） */
.home-radius {
    background-color: var(--white);
}

原理说明 #

:target伪类会匹配当前URL锚点对应的元素，点击导航链接后，URL锚点会指向对应容器的id，此时该容器会自动应用:target样式，实现持久高亮效果。

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