[分享]css中如何默认选中导航栏

CSS可以通过设置默认的选中导航栏来控制页面的初次展示效果。

nav {
    display: flex;
    justify-content: space-around;
}

nav a {
    padding: 10px;
    text-decoration: none;
    color: #333;
    border-bottom: 2px solid transparent;
}

nav a:hover {
    border-bottom: 2px solid #333;
}

nav .active {
    border-bottom: 2px solid #333;
} 

在上面的代码中，我们首先使用了flex布局来实现导航栏的水平排列，并为导航栏中的每一个链接设置了共同的样式，包括内边距、文本装饰和文字颜色。

其中，nav a:hover表示鼠标经过链接时的样式，为其下边框设置了2像素的宽度以及黑色的颜色。

而nav .active则为默认选中的导航栏设置了样式，同样为其下边框设置了2像素的宽度以及黑色的颜色，以区别于其他链接。

因此，在HTML中只需要设置一个链接的class为active即可默认选中该链接，并在页面加载时呈现这个效果。