Web前端開發: :has功能性偽類選擇器

?:has功能性偽類選擇器:

? ? :has()?是 CSS 中的一個功能性偽類選擇器,它允許開發者根據元素的后代元素、兄弟元素或后續元素的存在或狀態來選擇目標元素。它本質上是一個“父選擇器”或“關系選擇器”,解決了 CSS 長期以來無法根據子元素反向選擇父元素的痛點。

核心功能與語法?:

/* 選擇包含匹配子元素的父元素 */
parent:has(childSelector) {/* 樣式規則 */
}/* 選擇包含匹配兄弟元素的元素 */
element:has(+ siblingSelector) {/* 樣式規則 */
}

關鍵特性詳解:

1.基于后代/兄弟關系選擇

  • 選擇包含特定子元素的父元素:
/* 選擇所有包含 <img> 子元素的 <div> */div:has(> img) {border: 2px solid blue;
}
  • 選擇包含特定兄弟元素的元素:
/* 選擇緊鄰 <h2> 的 <div> */
div:has(+ h2) {background: yellow;
}

2.支持復雜嵌套條件

可組合其他選擇器實現精細控制:

/* 選擇包含 "active" 類子按鈕的卡片 */
.card:has(> .btn.active) {box-shadow: 0 0 10px red;
}

3.鏈式調用

允許多層條件篩選:

/* 選擇包含已勾選復選框的表單 */
form:has(input[type="checkbox"]:checked) {background: lightgreen;
}

實際應用場景

1.動態表單反饋

當輸入框無效時高亮其父容器:

.form-group:has(:invalid) {border-left: 3px solid red;
}

2.響應圖片容器

為包含圖片的卡片添加特殊樣式:

article:has(figure > img) {padding: 1.5em;
}

3.交互狀態聯動

根據子元素狀態改變父元素樣式:

/* 下拉菜單展開時改變按鈕顏色 */
.dropdown:has(.menu:visible) > .dropdown-btn {background: #555;
}

瀏覽器兼容性

瀏覽器支持版本
Chrome105+ (2022年起)
Safari15.4+ (2022年起)
Firefox121+ (2023年起)
Edge105+
移動端瀏覽器主流版本均已支持

提示:在舊版瀏覽器中需使用 JavaScript 實現類似邏輯。

?

注意事項

  1. 性能優化
    避免在大型DOM樹中使用復雜?:has()?選擇器,可能影響渲染性能。

  2. 作用域限制
    不能用于匹配偽元素(如?::before)。

  3. 組合優先級
    選擇器優先級由?:has()?內部的選擇器決定:

/* 優先級等效于 div.foo:has(...) */
div:has(.foo) { ... }

?

總結:?

?????:has()?徹底改變了 CSS 的選擇器能力,使開發者能夠基于子元素狀態動態控制父元素樣式,大幅減少對 JavaScript 的依賴,標志著 CSS 在現代 Web 開發中的重大進步。

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

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

相關文章

深度學習8(梯度下降算法改進2)

目錄 RMSProp 算法 Adam算法 學習率衰減 RMSProp 算法 RMSProp(Root Mean Square Prop)算法是在對梯度進行指數加權平均的基礎上&#xff0c;引入平方和平方根。 其中e是一個非常小的數&#xff0c;防止分母太小導致不穩定,當 dw 或 db 較大時&#xff0c;(du)2,(db)2會較大&…

JAVA面試寶典 -《網絡編程核心:NIO 與 Netty 線程模型詳解》

網絡編程核心&#xff1a;NIO 與 Netty 線程模型詳解 文章目錄網絡編程核心&#xff1a;NIO 與 Netty 線程模型詳解一、傳統 BIO 模型&#xff1a;排隊買奶茶的阻塞模式 &#x1f964;1.1 專業解釋1.2 簡單點比喻1.3 簡單示例二、NIO 模型&#xff1a;智能叫號餐廳系統 &#x…

藍橋杯 第十六屆(2025)真題思路復盤解析

本文以洛谷平臺所提供的題目描述及評測數據為基礎進行講解。 前言&#xff1a;這是本人的藍橋杯試卷&#xff0c;大概排省一前40%的位置&#xff0c;實際上這屆題目偏難&#xff0c;我沒有做出太多的有效得分。我把當時的思路和現在學習的思路都復盤進來&#xff0c;希望給大家…

蘭頓螞蟻路徑lua測試

蘭頓螞蟻local p0 local x,y,z0,7,0 local function add() local result,id Block:getBlockID(x,y,z)if id1 thenBlock:destroyBlock(x,y,z,false) pp90 elseBlock:setBlockAll(x,y,z,1,0) pp-90 end x,zx-math.floor(0.5math.sin(math.rad(p))),z-math.floor(0.5math.cos(m…

【Axure RP】什么是Axure?Axure可以用來做什么?

【Axure RP】什么是Axure&#xff1f;Axure可以用來做什么&#xff1f; 目錄【Axure RP】什么是Axure&#xff1f;Axure可以用來做什么&#xff1f;Axure RP簡介Axure RP 是什么&#xff1f;Axure RP核心功能和應用場景Axure RP簡介 Axure RP 是什么&#xff1f; Axure RP 是一…

Java項目:基于SSM框架實現的暢玩北海旅游網站管理系統【ssm+B/S架構+源碼+數據庫+畢業論文】

摘 要 現代經濟快節奏發展以及不斷完善升級的信息化技術&#xff0c;讓傳統數據信息的管理升級為軟件存儲&#xff0c;歸納&#xff0c;集中處理數據信息的管理方式。本暢玩北海旅游網站就是在這樣的大環境下誕生&#xff0c;其可以幫助管理者在短時間內處理完畢龐大的數據信息…

NuxtJS中網絡請求模塊的封裝與最佳實戰

在網絡開發中&#xff0c;封裝一個簡潔、高效的網絡請求模塊對于項目的可維護性和擴展性至關重要。本文將詳細介紹如何在NuxtJS中封裝一個通用的網絡請求模塊&#xff0c;并結合最佳實踐來說明如何使用它來進行網絡請求。良好的代碼結構和封裝&#xff0c;不但結構清晰還能夠大…

云歸子批量混剪軟件批量剪輯軟件批量分割視頻更新記錄

www.yunguizi.com 優化顯卡硬件加速配置 ? 優化 2025年07月07日 版本 v1.1.6 優化顯卡硬件加速配置 修復了一些重要內容 &#x1f41b; 修復 2025年07月06日 版本 v1.1.6 修復了一些重要內容 重構讀寫機制 ? 優化 2025年07月06日 版本 v1.1.6 優化了一些重要內容&#xff1b;…

SpringBoot校園外賣服務系統設計與實現源碼

概述 基于SpringBoot開發的校園外賣服務系統&#xff0c;實現了從外賣管理到訂單處理的全流程數字化解決方案&#xff0c;包含外賣管理、訂單處理、用戶管理等全方位功能。 主要內容 核心功能模塊&#xff1a; ??個人信息管理??&#xff1a; 修改密碼個人信息修改 ??…

東軟8位MCU低功耗調試總結

簡介主控選用8位ES7P7021&#xff0c;應用于磁吸無線充電場景&#xff0c;有一個雙向C口&#xff08;IP5219&#xff09;&#xff0c;MCU控制電量燈顯示&#xff0c;通過IIC控制C口的降額&#xff0c;插入TYPE-C線之后有一個外部中斷信號&#xff0c;觸發MCU喚醒&#xff0c;開…

什么是 3D 文件?

3D 文件是 3D 對象的數字表示形式&#xff0c;可以在計算機輔助設計 &#xff08;CAD&#xff09; 軟件中創建或編輯。它們包含有關物體的形狀、大小和結構的信息&#xff0c;對 3D 打印過程至關重要。3D 文件格式允許在不同的程序和打印機之間交換 3D 模型&#xff0c;并確定模…

語言模型 RLHF 實踐指南(一):策略網絡、價值網絡與 PPO 損失函數

在使用 Proximal Policy Optimization&#xff08;PPO&#xff09;對語言模型進行強化學習微調&#xff08;如 RLHF&#xff09;時&#xff0c;大家經常會問&#xff1a; 策略網絡的動作概率是怎么來的&#xff1f;價值網絡的得分是如何計算的&#xff1f;獎勵從哪里來&#xf…

日常--記一次gitlab Runner配置與CI/CD環境搭建流程

文章目錄一、前言二、相關知識1.相關定義1.什么是 CI&#xff1f;2.什么是 CD&#xff1f;2.CI/CD 構建塊與工具鏈3.為什么要使用 CI/CD&#xff1f;三、準備四、實現1.Runner安裝與配置1.更新源2.安裝Runner3.注冊Runner4.啟動Runner5.查看Runner信息2.CI/CD流程測試1.CI/CD構…

東方仙盟AI數據中間件使用教程:開啟數據交互與自動化應用新時代——仙盟創夢IDE

一、啟動未來之窗AI 二、初始化數據接口三、便捷接口數據進入東方仙盟獲取接口標準四、同步參數仙界界牌&#xff0c;冥界界牌&#xff0c;仙盟界牌 五、開始同步六、東方仙盟青云劍魂架構在當今數字化浪潮下&#xff0c;數據的采集、處理與傳輸成為眾多應用場景的核心需求。而…

Rust 仿射類型(Affine Types)

在 Rust 中&#xff0c;仿射類型&#xff08;Affine Types&#xff09; 是所有權系統的理論基礎&#xff0c;它規定了每個值有且僅有一次使用機會。這與線性類型&#xff08;必須恰好使用一次&#xff09;有所不同&#xff0c;允許值未被使用就被丟棄。Rust 中的仿射類型核心特…

python庫 arrow 庫的各種案例的使用詳解(更人性化的日期時間處理)

文章目錄 一、arrow概述1.1 arrow介紹1.2 安裝 arrow1.3 注意事項二、基本使用2.1 創建 Arrow 對象2.2 格式化輸出2.3 時間運算三、高級功能3.1 時區處理3.2 時間范圍3.3 時間間隔四、實際應用案例4.1 日志時間處理4.2 會議時間提醒4.3 國際化時間顯示5. Arrow 與 datetime 互操…

window 服務器上部署前端靜態資源以及nginx 配置

最近搞了一臺境外服務器 這種境外服務器是不可以配置域名的 但是可以使用ip訪問 但是如果需要 配置 需要下載nginx nginx: download 我這個是windows 的 服務器 所以下載windows 的nginx 下載完成以后 這個里面的html 文件 就是前端項目 里面必須要有index.html文件 部署…

行業實踐案例:醫療行業數據治理的挑戰與突破

“醫療數據不僅是資源,更關乎生命。” ——醫療行業的數據治理,是合規、安全、質量與智能化的多重挑戰。 ?? 本文目錄 為什么醫療行業亟需數據治理? 醫療行業數據治理的獨特挑戰 醫療數據治理體系設計原則 關鍵能力模塊與實踐案例 工具選型與落地建議 總結與下一步 1?? …

單細胞轉錄組學和空間轉錄組學數據的整合方法

文章目錄問題1&#xff1a;現有技術是否可以拿取固定數目的細胞進行組合形成spot問題2&#xff1a;是否有關于這方面的研究問題3&#xff1a;相關論文推薦一、細胞反卷積的核心目標與挑戰二、單細胞與空間轉錄組數據的整合方法分類1. 概率型方法&#xff08;Probabilistic-base…

【Java EE】SpringBoot 配置文件、日志和單元測試

1. 什么是配置文件在我們的計算機上諸如 C:/Users&#xff0c;C:/Windows&#xff0c;.config&#xff0c;.xml 都是配置文件&#xff0c;配置文件主要為了解決硬編碼帶來的問題。硬編碼是將數據直接寫在程序的源代碼中&#xff0c;代碼寫死后再想改變就很麻煩。因此&#xff0…