CSS導航欄是網頁設計中非常重要的一部分，它可以讓用戶快速定位到需要的內容。而在導航欄中，選中狀態也是非常重要的，可以讓用戶知道當前所在頁面。下面就介紹一下CSS導航欄點擊選中狀態的實現。

.nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
margin-right: 20px;
}
.nav li a {
text-decoration: none;
color: #333;
font-weight: bold;
padding: 5px 10px;
}
.nav li:hover a,
.nav li.active a {
background-color: #333;
color: #fff;
}

在上述代碼中，我們通過flex布局將導航欄的每個選項橫向排列。使用list-style:none去除默認的序號列表樣式，padding和margin也被設置為0，以達到更好的效果。同時，每個導航項之間設置了間距。

在每個導航項的a元素中，我們設置了字體的顏色、粗細和內邊距等等。這些基本樣式的設置可以根據實際情況進行更改。

在第10行代碼中，我們設置了導航項在鼠標懸停時的樣式，即背景顏色為黑色，文字顏色為白色。在第11行代碼中，我們設置了導航項點擊選中時的樣式，即添加了.active類，并將背景顏色和文字顏色設為與鼠標懸停時相同。

最后，在實際使用中，我們可以通過JavaScript或jQuery等動態添加或刪除.active類來實現導航項的選中狀態。這樣，就可以讓用戶更加便捷地瀏覽網站。