CSS 類選擇器未生效：優先權與選擇器權重問題

問題代碼

<style>
#city th { background-color: darkcyan; }
#city tfoot td { background-color: darkgrey; }
#city { border-collapse: collapse; }
#city th, td { border: 1px solid salmon; }  /* 注意：這裡的 td 未加 #city 前綴 */
.class1 { border-bottom: 1px solid darkseagreen; }
</style>

<table id="city">
  <tr class="class1"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  ...
</table>

為何 `.class1` 的 `border-bottom` 沒有套用到 `` 上的 ``？

原因分析

1. 選擇器權重不足：`#city th, td` 實際解析為 `#city th` 和 `td`（全域 `td`）。ID 選擇器 `#city` 權重 (1,0,0) 遠高於類選擇器 `.class1` (0,1,0)。雖然 `.class1` 寫在後面，但 `#city th, td` 中的 `td` 選擇器權重為 (0,0,1)，與 `.class1` 同級，但瀏覽器對 `border` 屬性的層疊規則導致後者被覆蓋。
2. 邊框屬性不會從 `` 繼承到 ``：CSS 規範中，`border` 不可繼承。給 `` 設定 `border-bottom` 無效，必須直接針對 `` 設定。

正確寫法

/* 明確針對 #city 表格中 class1 行的 td 設定底部邊框 */
#city tr.class1 td {
    border-bottom: 1px solid darkseagreen;
}

• 權重：ID (1,0,0) + 類 (0,1,0) + 元素 (0,0,1) = (1,1,1)，高於單純的 `td` (0,0,1)。
• 直接作用於 ``，符合 CSS 盒模型。

最佳實踐提醒

• 避免使用 `#city th, td` 這種容易誤解的群組選擇器，建議寫成 `#city th, #city td`。
• 表格邊框建議統一在 ``/`` 設定，或使用 `border-collapse: collapse` 統一管理。