告诉我html页面导航栏点击选中后变色的css代码属性并给我一个样例

HTML页面中，导航栏通常通过CSS来实现点击后变色的效果。这通常是利用`:active`伪类，它会在元素被激活（比如鼠标按下并保持在该位置）时应用样式。下面是一个简单的CSS代码示例：

<nav class="navbar">
  <ul>
    <li><a href="#" class="nav-link">链接1</a></li>
    <li><a href="#" class="nav-link">链接2</a></li>
    <li><a href="#" class="nav-link">链接3</a></li>
  </ul>
</nav>

<style>
.navbar {
  background-color: #f8f9fa;
}

.nav-link {
  display: inline-block;
  padding: 10px;
  color: black;
  text-decoration: none;
}

.nav-link:hover {
  background-color: lightgray; /* 鼠标悬停效果 */
}

.nav-link:active {
  background-color: darkblue; /* 点击后选中效果 */
}
</style>

在这个例子中，`.nav-link:active`规则设置了导航项被激活（即用户点击）时的颜色。当用户停止点击动作后，颜色会恢复到默认状态，如`:hover`所示。