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)
將排除類別為 special
的 li
元素,因此項目 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()
是一個非常強大的選擇器,但它也有一些限制:
- 只能包含單一選擇器:如前面所述,
:not()
中只能包含一個簡單的選擇器,不能同時排除多個條件或使用複雜的組合選擇器。 - 支援度:
:not()
在所有現代瀏覽器中都有很好的支援,但如果你需要支援非常舊的瀏覽器(例如 IE8 以下版本),可能需要特別注意它們是否能夠正確解析這個選擇器。
結論
CSS 的 :not()
偽類選擇器是一個強大的工具,能夠幫助我們在應用樣式時排除特定的元素。
無論是排除特定類別、標籤,還是與其他偽類選擇器結合使用,:not()
都提供了靈活且有效的方式來精確控制樣式的應用範圍。
作為初學者,學習如何使用 :not()
能讓你在設計更具複雜性的樣式時更加得心應手。
希望這篇文章能幫助你掌握 :not()
的使用方法,讓你的 CSS 寫作更具效率和靈活性!