Web前端:not(否定偽類選擇器)

not(否定偽類選擇器)

????????CSS中的 :not() 選擇器是?個否定偽類選擇器,它?于選擇不符合給定選擇器的元素。這是?種排除特定元素的?法,可以?來簡 化復雜的選擇器,提? CSS 規則的靈活性和精確性。
:not() 選擇器的基本語法如下:
selector:not(selector-to-exclude) {/* 樣式規則 */
}
?
  • selector:基礎選擇器(如元素、類、ID 等)。

  • selector-to-exclude:要排除的選擇器(可以是簡單或復合選擇器)。

核心特性

  1. 排除特定元素
    選擇所有滿足基礎選擇器條件,但不滿足括號內選擇器條件的元素。

  2. 支持簡單選擇器
    :not()?的參數可以是:

    • 類型選擇器(如?div

    • 類選擇器(如?.class

    • ID 選擇器(如?#id

    • 屬性選擇器(如?[type="text"]

    • 偽類(如?:first-child

  3. 不支持復雜選擇器(舊版本限制)
    在 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> 元素,并將它們的?本顏?設置為綠?。

注意事項

  1. 優先級計算
    :not()?的優先級由其參數決定。例如:

    • div:not(.class)?的優先級 =?div?+?.class(0,0,1 + 0,1,0 =?0,1,1)。

  2. 不可嵌套偽元素
    :not()?內不能包含偽元素(如?::before)。

總結

特性說明
作用排除匹配指定選擇器的元素
參數限制CSS3:僅支持簡單選擇器;CSS4:支持逗號分隔的復雜選擇器(需注意兼容性)
優先級由基礎選擇器和括號內選擇器共同決定
典型用例過濾禁用元素、排除特定類/屬性、非首尾子元素樣式等

通過靈活使用?:not(),可以大幅簡化 CSS 代碼,避免編寫冗余的覆蓋樣式。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/88103.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/88103.shtml
英文地址,請注明出處:http://en.pswp.cn/web/88103.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【BTC】比特幣網絡

目錄 一、比特幣網絡架構 1.1 節點加入與離開 二、消息傳播方式 三、交易處理機制 四、網絡傳播問題 五、實際應用問題及解決 本章節講比特幣網絡的工作原理&#xff0c;講解新創建的區塊是如何在比特幣網絡中傳播的。 一、比特幣網絡架構 比特幣工作在應用層&#xff…

Clickhouse 的歷史發展過程

20.5.3 開始支持多線程20.6.3 支持explainmysql 20.8 實時同步mysql&#x1f4cc; ?一、早期版本階段&#xff08;1.1.x系列&#xff09;??版本范圍?&#xff1a;1.1.54245&#xff08;2017-07&#xff09;→ 1.1.54394&#xff08;2018-07&#xff09;?核心特性?&#x…

玩轉n8n工作流教程(一):Windows系統本地部署n8n自動化工作流(n8n中文漢化)

在Windows系統下使用 Docker 本地部署N8N中文版的具體操作&#xff0c;進行了詳盡闡述&#xff0c;玩轉n8n工作流教程系列內容旨在手把手助力從0開始一步一步深入學習n8n工作流。想研究n8n工作流自動化的小伙伴們可以加個關注一起學起來。后續也會持續分享n8n自動化工作流各種玩…

mini-program01の系統認識微信小程序開發

一、官方下載并安裝 1、下載&#xff08;I選了穩定版&#xff09; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2、安裝&#xff08;A FEW MOMENT LATER&#xff09;…

如何將 Java 項目打包為可執行 JAR 文件

如何將 Java 項目打包為可執行 JAR 文件我將詳細介紹將 Java 項目打包為可執行 JAR 文件的完整流程&#xff0c;包括使用 IDE 和命令行兩種方法。方法一&#xff1a;使用 IntelliJ IDEA 打包步驟 1&#xff1a;配置項目結構打開項目點擊 File > Project Structure在 Project…

【Starrocks 異常解決】-- mysql flink sync to starrocks row error

1、異常信息 flink 1.20 starrocks 3.3.0 mysql 8.0 errorLog: Error: Target column count: 35 doesnt match source value column count: 28. Column separator: \t, Row delimiter: \n. Row: 2025-05-22 6 23400055 214 dssd 1 1 1928 mm2er 360 20000.00000000 1…

Jenkins 使用宿主機的Docker

背景&#xff1a;不想在Jenkins 內部安裝Docker,想直接使用Jenkins服務所在的系統安裝的docker當你在 Jenkins 中執行 docker 命令時&#xff0c;實際上是通過 Docker 客戶端與 Docker 守護進程進行通信。Docker 客戶端和守護進程之間的通信是通過一個名為 /var/run/docker.soc…

工具+服務雙驅動:創客匠人打造中醫IP差異化競爭力

一、技術工具場景化定制&#xff1a;中醫專業的可視化破圈在中醫IP同質化嚴重的行業現狀下&#xff0c;創客匠人以場景化技術工具破解專業傳播難題。系統內置的“體質測試”模塊可生成個性化調理報告&#xff0c;“案例庫”支持前后對比圖上傳&#xff0c;“直播問診”自動添加…

JVM對象分配內存如何保證線程安全?

大家好&#xff0c;我是鋒哥。今天分享關于【JVM對象分配內存如何保證線程安全&#xff1f;】面試題。希望對大家有幫助&#xff1b; JVM對象分配內存如何保證線程安全&#xff1f; 超硬核AI學習資料&#xff0c;現在永久免費了&#xff01; 在Java中&#xff0c;JVM&#xf…

機器學習中的數據對齊

文章目錄前言數據集怎么理解數據數據對齊為什么偏偏是這樣對齊&#xff1f;前言 在神經網絡中&#xff0c;我們往往會根據數據集構建訓練集、測試集&#xff0c;有時會有驗證集。但是&#xff0c;在構建完成后&#xff0c;如果直接將這些數據直接扔進模型訓練&#xff0c;輸入…

機器學習:更多分類回歸算法之決策樹、SVM、KNN

下面介紹的這幾種算法&#xff0c;既能用于回歸問題又能用于分類問題&#xff0c;接下來了解下吧。 決策樹 可參考&#xff1a; 決策樹&#xff08;Decision Tree&#xff09; | 菜鳥教程 決策樹&#xff08;Decision Tree&#xff09;是一種常用的監督學習算法&#xff0c;可用…

Vue 整合 Vue Flow:從零構建交互式流程圖

目錄引言目的適用場景環境準備基礎組件 (index.vue)自定義組件 (矩形、菱形等)RectangleNode.vue (矩形節點)&#xff1a;DiamondNode.vue (菱形節點)&#xff1a;ImageNode(自定義圖片節點):操作實現 (#操作實現) 拖拽節點 (#拖拽節點) 連線 (多連接點) 刪除節點 …

C# WPF - Prism 學習篇:搭建項目(一)

一、前期準備開發工具&#xff1a;Visual Studio 2022二、創建項目1、創建WPF 應用“WpfApp.StudyDemo”&#xff1a;2、項目結構如下&#xff1a; 三、安裝 Prism1、選中項目“WpfApp.PrismDemo”&#xff0c;在右鍵菜單中選擇“管理 NuGet 程序包(N)...”。2、在搜索框中輸入…

單片機 基于rt-thread 系統 使用 CCM內存

一、開發環境 開發板&#xff1a;野火stm32f407 系統&#xff1a;rt-thread V4.1.1 二、鏈接腳本配置 ; ************************************************************* ; *** Scatter-Loading Description File generated by uVision *** ; ****************************…

【UnityAssetBundle】AB包卸載資源

AB包的卸載高效穩定游戲開發的強制要求&#xff0c;它解決了資源管理中的內存泄漏問題&#xff0c;為動態的內容加載、熱更新、大型世界的構建提供了內存保障&#xff0c;最終提升了游戲性能、穩定性和用戶體驗。卸載資源方式一&#xff08;推薦使用&#xff09;&#xff1a;卸…

【萬字長文】深度學習2 yolov5修改為自己的數據集

數據預處理 使用labelme可以直接導出適用于yolo模型的txt文本數據&#xff0c;也可以直接導出默認的json數據結構&#xff0c;后面我會提供代碼進行轉換。自行進行標注&#xff0c;圖片與標注一一對應&#xff0c;更多要求不贅述。因為我做最簡單的檢索模型&#xff0c;不做切…

ubuntu18編譯RealSense SDK 2.0

參考文章&#xff1a;https://dev.intelrealsense.com/docs/compiling-librealsense-for-linux-ubuntu-guide1、安裝依賴 sudo apt-get update && sudo apt-get upgrade && sudo apt-get dist-upgrade sudo apt-get install libssl-dev libusb-1.0-0-dev libud…

算法學習筆記:9.Kruskal 算法——從原理到實戰,涵蓋 LeetCode 與考研 408 例題

在圖論的眾多算法中&#xff0c;Kruskal 算法以其簡潔高效的特性&#xff0c;成為求解最小生成樹&#xff08;Minimum Spanning Tree&#xff0c;MST&#xff09;的經典方法。無論是在通信網絡的優化設計、電路布線的成本控制&#xff0c;還是在計算機考研 408 的備考過程中&am…

Vue+Openlayers加載OSM、加載天地圖

文章目錄1. 介紹2. 加載底圖2.1 加載默認OSM地圖2.2 加載天地圖1. 介紹 Openlayers官網&#xff1a;https://openlayers.org/ 安裝依賴&#xff1a;npm i ol 2. 加載底圖 參考博客&#xff1a; vueopenlayers環境配置&#xff1a;https://blog.csdn.net/cuclife/article/det…

Python處理電子表格文件庫之pyexcel使用詳解

概要 pyexcel是一個功能強大的Python第三方庫,專門用于處理各種格式的電子表格文件。核心價值在于提供了統一的接口來讀取、寫入和操作Excel、CSV、ODS等多種電子表格格式,極大簡化了數據處理工作流程。與傳統的單一格式處理庫不同,pyexcel采用了插件化架構,使開發者能夠通…