[CSS] 使用:not()選擇器排除多個類別

CSS提供眾多選擇器，確保元素目標的精確控制。在這些選擇器中，:not()偽類具有獨特的功能，讓開發者透過排除法進行設計。

介紹:not()偽類

:not()偽類選擇器充當否定偽類。專門用於選擇和設計除符合指定選擇器的所有元素以外的元素。本質上，它否定了給定選擇器的結果。

上述代碼確保所有沒有.special-item類的<li>標籤採用藍色。

與多個類結合的:not()

利用:not()選擇器結合多個類的能力進一步擴展了其實用性。通過鏈接此偽類，開發者可以細化元素目標並一次排除多個類。

這段CSS針對.container內的所有段落，並使用紅色對它們進行設計，除了具有.highlight或.important類的段落。

與多個類結合的:not()的進階情境

雖然我們討論了與多個類結合的:not()的基礎，但可能會遇到更多複雜的使用情境。

有了:not()選擇器，您可以針對特定子元素進行目標設定，同時排除其他元素。

此片段針對<section>內沒有special類的<div>元素。在這些目標<div>中，它進一步過濾出具有.highlighted或.important類的元素，並對其餘部分應用邊框。

如此精確的目標設定可以大大減少使用JavaScript增加或刪除類的需求，從而提高效能。

在複雜設計中使用帶有屬性選擇器的:not()

除了基於類的排除之外，:not()還與屬性選擇器強烈結合。這允許基於元素屬性而不僅僅是類來進行微妙的設計。

在此，我們設計了所有輸入字段，除了"提交"和"重置"按鈕，使其具有圓角。通過利用帶有屬性值的:not()選擇器，開發者可以提供直觀的視覺提示，而無需過分依賴類或ID。

總之，:not()偽類選擇器是CSS工具箱中的重要工具，允許開發者透過排除法進行設計。通過本指南，您現在掌握了如何有效地使用帶有多個類的:not()選擇器的知識。