在網(wǎng)頁(yè)設(shè)計(jì)中，導(dǎo)航欄是一個(gè)非常重要的元素。當(dāng)我們頁(yè)面中有多個(gè)頁(yè)面時(shí)，通過(guò)導(dǎo)航欄能夠快速地切換頁(yè)面，提高用戶的使用體驗(yàn)。CSS3中提供了多種方式來(lái)實(shí)現(xiàn)導(dǎo)航欄的效果，其中比較常見(jiàn)的是使用:active和:hover選擇器來(lái)實(shí)現(xiàn)導(dǎo)航欄切換。

.nav-item:hover,
.nav-item.active {
background-color: #f00;
color: #fff;
}

上面的代碼中，.nav-item表示導(dǎo)航欄中的每個(gè)選項(xiàng)，:hover和.active分別表示鼠標(biāo)懸停和選中狀態(tài)。在這里我們將鼠標(biāo)懸停和選中狀態(tài)下的背景顏色設(shè)為紅色，字體顏色設(shè)為白色。

通過(guò)CSS選擇器的使用，我們可以方便地實(shí)現(xiàn)導(dǎo)航欄切換效果。除了上述方式，還有很多其他的方式可以實(shí)現(xiàn)導(dǎo)航欄的切換效果，例如使用JavaScript或者jQuery等腳本語(yǔ)言。