not(否定偽類選擇器)
????????CSS中的 :not() 選擇器是?個否定偽類選擇器,它?于選擇不符合給定選擇器的元素。這是?種排除特定元素的?法,可以?來簡 化復雜的選擇器,提? CSS 規則的靈活性和精確性。
:not() 選擇器的基本語法如下:
selector:not(selector-to-exclude) {/* 樣式規則 */
}
?
selector
:基礎選擇器(如元素、類、ID 等)。selector-to-exclude
:要排除的選擇器(可以是簡單或復合選擇器)。
核心特性
排除特定元素
選擇所有滿足基礎選擇器條件,但不滿足括號內選擇器條件的元素。支持簡單選擇器
:not()
?的參數可以是:類型選擇器(如?
div
)類選擇器(如?
.class
)ID 選擇器(如?
#id
)屬性選擇器(如?
[type="text"]
)偽類(如?
:first-child
)
不支持復雜選擇器(舊版本限制)
在 CSS3 中,:not()
?的參數不能包含組合器(如空格、>
、+
),但 CSS4 允許更復雜的參數(需注意瀏覽器兼容性)。
示例:
1、排除特定元素
如果你想為所有除了特定類之外的 <p> 元素應?樣式,可以這樣寫:
p:not(.exclude) {color: red;
}
這將會選擇所有沒有 .exclude 類的 <p> 元素,并將它們的?本顏?設置為紅?。
?
?效果展示:
?
2、排除多個元素
:not() 選擇器可以包含多個條件,?于排除多個元素:
div:not(.exclude, .ignore) {background-color: lightblue;
}
?這將選擇所有不含有 .exclude 或 .ignore 類的 <div> 元素,并為它們設置淺藍?背景。
效果展示:
3、結合其他選擇器
:not() 可以與其他選擇器結合使?,以創建更具體的規則:
a:not([href*="http://"]) {color: green;
}
這將會選擇所有 href 屬性不包含 "http://" 的 <a> 元素,并將它們的?本顏?設置為綠?。
注意事項
優先級計算
:not()
?的優先級由其參數決定。例如:div:not(.class)
?的優先級 =?div
?+?.class
(0,0,1 + 0,1,0 =?0,1,1)。
不可嵌套偽元素
:not()
?內不能包含偽元素(如?::before
)。
總結
特性 | 說明 |
---|---|
作用 | 排除匹配指定選擇器的元素 |
參數限制 | CSS3:僅支持簡單選擇器;CSS4:支持逗號分隔的復雜選擇器(需注意兼容性) |
優先級 | 由基礎選擇器和括號內選擇器共同決定 |
典型用例 | 過濾禁用元素、排除特定類/屬性、非首尾子元素樣式等 |
通過靈活使用?:not()
,可以大幅簡化 CSS 代碼,避免編寫冗余的覆蓋樣式。