CSS :not() 偽類選擇器入門指南:新手必讀

更新日期: 2024 年 10 月 22 日

在學習 CSS 時,選擇器是一項非常重要的技能,它幫助我們精準地選取要應用樣式的元素。

大多數時候,我們需要指定某些元素來應用樣式,但有時我們會想要排除特定的元素。

這時候,CSS 的 :not() 偽類選擇器就派上用場了。

這篇文章將帶你了解 :not() 的功能及用法,並通過範例幫助你掌握,如何靈活運用這個強大的選擇器。

什麼是 :not() 選擇器?

CSS 的 :not() 是一個偽類選擇器,它用來排除某些不符合條件的元素。

換句話說,:not() 允許我們對所有符合條件的元素應用樣式,但不包括某些特定的元素。

基本語法

selector:not(排除條件) {
  /* 樣式規則 */
}
  • selector:用來選擇元素的基本選擇器。
  • 排除條件:用來排除不應該應用樣式的元素選擇器。

範例

假設我們有一個列表,我們希望為所有的 li 元素設置紅色字體,但排除具有 .special 類別的 li 元素:

<ul>
  <li>項目 1</li>
  <li class="special">項目 2</li>
  <li>項目 3</li>
</ul>

對應的 CSS 可以這樣寫:

li:not(.special) {
  color: red;
}

在這個範例中,:not(.special) 將排除類別為 specialli 元素,因此項目 1 和項目 3 的文字會變成紅色,而項目 2 的文字保持不變。

:not() 的應用範圍

排除特定類別的元素

:not() 最常見的用法,是排除具有某些特定類別的元素。

例如,你可以為一個表格中的所有行設置樣式,但不包括具有特定類別的行:

tr:not(.no-style) {
  background-color: #f0f0f0;
}

這將會為表格中所有沒有 .no-style 類別的行應用灰色背景。

排除特定標籤的元素

你也可以用 :not() 來排除某些特定的 HTML 標籤。

例如,你可能想要為所有的段落設置某種樣式,但不包括標籤內的 p 元素:

p:not(article p) {
  font-size: 16px;
}

這裡,所有不位於 <article> 標籤內的段落都會應用字體大小為 16px 的樣式。

結合其他偽類選擇器

:not() 也可以與其他偽類選擇器結合使用。

這使得它在更複雜的選擇條件下更具靈活性。

例如,選取所有的 li,但排除第一個元素:

li:not(:first-child) {
  background-color: lightblue;
}

這將為所有的列表項應用藍色背景,但第一個項目不會被影響。

:not() 只能包含單一選擇器

在使用 :not() 時,必須注意的是,:not() 偽類選擇器中只能包含單一選擇器,而不能放入複合選擇器或複雜的條件。

例如,:not(.class1, .class2) 是不合法的,這樣會導致語法錯誤。

如果你想要排除多個條件,則需要重複使用 :not()。例如,要排除兩個類別,可以這樣寫:

div:not(.class1):not(.class2) {
  background-color: yellow;
}

這段樣式會為所有不具有 .class1.class2 類別的 div 元素應用黃色背景。

實際應用範例

為表單元素設置樣式,排除特定類型的輸入框

在表單樣式設置中,你可能需要排除某些類型的輸入框(例如,提交按鈕)。

這時,:not() 可以幫助你只對部分元素應用樣式:

input:not([type="submit"]) {
  border: 1px solid #ccc;
  padding: 5px;
}

這樣,除了提交按鈕以外的所有輸入框都會有邊框和內距樣式。

列表中排除最後一個元素

有時我們想要為一個列表中的所有項目設置樣式,但不包括最後一個項目。

例如,為列表項設置下劃線,但排除最後一個項目:

li:not(:last-child) {
  border-bottom: 1px solid #000;
}

這樣,除了最後一個項目外,其他項目都會有底部邊框。

高亮顯示未選中的按鈕

假設我們有一組按鈕,並希望高亮顯示所有未被選中的按鈕:

<button class="btn selected">按鈕 1</button>
<button class="btn">按鈕 2</button>
<button class="btn">按鈕 3</button>
button:not(.selected) {
  background-color: lightgreen;
}

這段程式碼會將未被選中的按鈕(即沒有 .selected 類別的按鈕)背景設為綠色。

:not() 的限制

儘管 :not() 是一個非常強大的選擇器,但它也有一些限制:

  1. 只能包含單一選擇器:如前面所述,:not() 中只能包含一個簡單的選擇器,不能同時排除多個條件或使用複雜的組合選擇器。
  2. 支援度:not() 在所有現代瀏覽器中都有很好的支援,但如果你需要支援非常舊的瀏覽器(例如 IE8 以下版本),可能需要特別注意它們是否能夠正確解析這個選擇器。

結論

CSS 的 :not() 偽類選擇器是一個強大的工具,能夠幫助我們在應用樣式時排除特定的元素。

無論是排除特定類別、標籤,還是與其他偽類選擇器結合使用,:not() 都提供了靈活且有效的方式來精確控制樣式的應用範圍。

作為初學者,學習如何使用 :not() 能讓你在設計更具複雜性的樣式時更加得心應手。

希望這篇文章能幫助你掌握 :not() 的使用方法,讓你的 CSS 寫作更具效率和靈活性!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *