CSS 屬性選擇器能否實現「與、或、非」邏輯關係？

問題描述

開發中常需根據元素屬性進行複雜選擇，例如：選取 name="a" 或 name="b" 的 input；選取 name="a" 且 id="a" 的 input；選取 name 不等於 "a" 的 input。CSS 原生屬性選擇器是否支持這些邏輯組合？

核心結論

• 「或」關係：使用逗號分組選擇器實現，如 input[name="a"], input[name="b"]。
• 「與」關係：鏈式寫法實現，如 input[name="a"][id="a"]。
• 「非」關係：CSS 原生屬性選擇器不支持 否定邏輯（如 !="a"）。需借助 :not() 偽類（如 input:not([name="a"])）或 JavaScript/jQuery 處理。

代碼示例

/* 或：name為 a 或 b */
input[name="a"], input[name="b"] { color: red; }

/* 與：name為 a 且 id為 a */
input[name="a"][id="a"] { border: 2px solid blue; }

/* 非：name不為 a（需 :not() 支持） */
input:not([name="a"]) { background: #f0f0f0; }

補充說明

CSS 選擇器語法與 jQuery 高度相似，但 jQuery 擴展了更多偽類（如 :contains()、:has()），邏輯表達更靈活。若項目允許，複雜邏輯建議在 JS 層完成類名切換，再用簡單 CSS 選擇器控制樣式。

參考資源

W3School CSS 屬性選擇器教程