CSS導航選中后變亮是非常常見的一種交互效果，它可以顯著提升用戶體驗并增加網站的可用性。下面就讓我們來學習如何實現一個簡單的CSS導航選中后變亮效果。

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

在這段代碼中，我們設置了一個名為“nav”的無序列表，并使用flexbox布局將其水平排列。每個列表項都有一個“a”元素作為鏈接，其中，“color”屬性設置了鏈接文本的顏色，“text-decoration”屬性將下劃線去掉了。我們還為鏈接添加了一些內邊距和邊框半徑，以使其看起來更像一個按鈕。

但是真正有趣的部分是CSS的“:hover”和“.active”偽類選擇器。當用戶將鼠標懸停在鏈接上時，“:hover”選擇器將為鏈接添加一個淺灰色背景色。當用戶單擊鏈接時，我們將添加一個名為“active”的CSS類，并使用相同的背景色改變已激活鏈接的外觀。

這就是實現CSS導航選中后變亮的全部內容了。簡單而強大的CSS樣式能夠讓網站變得更加優美，同時也能提供更好的用戶體驗。