css导航栏点击后变色

CSS导航栏是网站中常见的元素之一，它为用户提供了快速访问网站不同部分的方式。在导航栏中，点击不同的链接，可以让用户跳转到对应的页面。现在，我们来看一下如何通过CSS来实现导航栏点击后变色的效果。

.navbar a:active {
    color: red;
}

CSS中的:active伪类用于表示当前被点击的链接。因此，我们可以设置:active状态下链接的颜色，以实现当用户点击链接后显示的效果。

除了:active伪类，还有:hover和:visited伪类可以用于设置链接的样式。:hover用于表示当鼠标悬停在链接上时，链接的状态；:visited用于表示当链接已被访问后的状态。

在实现导航栏时，我们一般会将链接放置在<ul>和<li>中，如下所示：

<nav class="navbar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

在CSS中，我们可以为<nav>和<ul>设置样式，如下所示：

.navbar {
    background-color: #333;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    display: inline-block;
}

.navbar a {
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

这样，我们就可以实现一个简单的导航栏，并设置了链接的样式。当然，还可以根据需求对导航栏进行进一步的设计和优化。

总的来说，通过CSS来实现导航栏点击后变色的效果并不难，只需要使用:active伪类即可。同时，我们还要注意设置导航栏的样式，以使整个导航栏看起来更加美观、清晰。