CSS中的偽級是什麼？-css教學-PHP中文網

CSS中的偽級是什麼？

Mar 19, 2025 pm 01:07 PM

CSS中的:not()偽級是一個功能符號，它允許您從選擇中排除某些元素。它用於通過在括號內否定給定的選擇器來創建更多特定的選擇器。例如， p:not(.special)將選擇所有<p></p>元素，除了具有“特殊”類的元素。

:not()偽級的語法為:not(selector) ，其中selector可以是任何簡單的選擇器，例如類型選擇器，類選擇器，ID選擇器或偽級（但不是另一個否定性偽級或偽元素）。 :not()偽級是CSS3規範的一部分，並且在現代瀏覽器中得到了廣泛支持。

使用:not()偽級可以通過多種方式顯著提高CSS選擇器的精度和可維護性：

降低特異性：通過排除元素，您可以使選擇器的具體特異性降低，這可以幫助維護級聯並避免特異性戰爭。例如，您可以簡單p使用p:not(.special) ，而不是包含.container .content p.special 。
簡化選擇器：the :not()偽級可以幫助您寫更多簡潔的CSS。例如，您可以將它們組合到一個選擇器中，而不是以不同的方式編寫樣式元素。例如， button:not([disabled])針對除禁用的按鈕以外的所有按鈕。
提高可讀性：use :not()可以使您的意圖更清晰，以使其他開發人員閱讀您的CSS。諸如nav ul:not(.dropdown)之類的選擇器清楚地表明您在導航欄中造型所有無序列表，除了類“下拉”類別的列表。
增強性能：在某些情況下，使用:not()可以通過快速排除不需要樣式的元素來幫助瀏覽器優化渲染，儘管這取決於瀏覽器的實現。

:not()偽級具有通用性，並且在網絡設計中具有幾個常見用例：

不包括交互式元素：您可能需要將樣式應用於除交互式元素以外的所有元素。例如， *:not(button):not(input):not(select)可以用來設計除形式控件以外的所有元素。
響應式設計：在響應式設計中，您可能需要將樣式應用於某些屏幕尺寸以外的元素。例如， @media (max-width: 768px) { div:not(.mobile-friendly) { display: none; } }除了在小於768px的屏幕上具有“移動友好型”類別的元素外@media (max-width: 768px) { div:not(.mobile-friendly) { display: none; } }將隱藏所有div元素。
造型文本元素：通常，您想將文本樣式應用於除某些容器中的所有文本元素。例如， body *:not(h1):not(h2):not(h3) { font-size: 16px; }除標題外，人體內部所有元素的字體大小body *:not(h1):not(h2):not(h3) { font-size: 16px; }將字體大小設置為16px。
重置樣式：the :not()偽級可用於重置樣式。例如， input:not([type="submit"]):not([type="button"]) { border: none; }將從所有輸入中刪除邊界，除了提交和按鈕類型。

是的，可以將:not()偽級與其他選擇器結合使用，以創建更複雜和精確的規則。以下是將其結合起來的一些方法：

與其他選擇器進行鏈接：您可以鏈接:not()與其他選擇器來完善您的選擇。例如， ul li:not(:first-child):not(:last-child)在ul中選擇除第一個和最後一個元素中的所有li元素。
與偽級結合：the :not()偽級可以與其他偽級相結合，例如:hover ， :focus或:checked 。例如， button:not(:disabled):hover將對懸停在未禁用的按鈕上應用樣式。
使用with with屬性選擇器：您可以使用:not() with屬性選擇器，以根據其屬性排除元素。例如， a:not([href^="mailto:"])選擇所有錨元素，除了具有href屬性的元素以“ mailto：”開頭。
在其他選擇器中嵌套：：： :not()偽級可以嵌套在其他選擇器中。例如， .container > *:not(.special) > p .container選擇所有是內部任何元素的直接子女的p元素，除了那些具有“ Special”類的元素。