CSS 導航選中樣式不生效：ID 選擇器權重與 HTML 結構匹配問題

問題代碼

/* CSS */
div li #select { background-color: darkcyan; }

/* HTML */

  

    
jlajla
    
jlajla
    ...
  

問題分析

選擇器 div li #select 的含義是：div 內部的 li 內部的、id 為 select 的元素。但 HTML 中 id="select" 直接在 <li> 上，因此：

• li#select 或 #select 才能匹配該 <li>。
• div li #select 會去找 <li> 內部 的 id="select" 元素，不存在 → 樣式不生效。

正確寫法

/* 方案一：直接用 ID 選擇器（權重最高，最簡潔） */
#select { background-color: darkcyan; }

/* 方案二：標簽+ID（語義更明確） */
li#select { background-color: darkcyan; }

/* 方案三：後代選擇器（若需限定範圍） */
div li#select { background-color: darkcyan; }
.nav-list li#select { background-color: darkcyan; } /* 推薦加類名限定 */

進階：導航高亮最佳實踐

.nav-list li.active { background-color: darkcyan; } /* 用類名而非 ID，支持多態 */
.nav-list li.active a { color: white; } /* 同時設置鏈接顏色 */

/* JS 切換 */
$('.nav-list li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

關鍵知識點

1. ID 選擇器：#id 匹配擁有該 ID 的元素本身，而非其後代。
2. 空格組合子：A B 選擇 A 內部的 B（後代），A > B 選擇直接子元素。
3. 權重計算：ID(100) > Class(10) > Tag(1)；#select 權重 100，div li #select 權重 101，但結構不匹配依然不生效。
4. 語義化：導航高亮推薦用 .active 類名，配合 JS 切換，避免 ID 唯一性限制（如多級導航）。

修正選擇器結構匹配關係，或改用類名狀態管理，即可解決導航選中樣式不生效問題。