CSS 不斷發(fā)展，使開發(fā)人員能夠輕松構(gòu)建動(dòng)態(tài)、直觀且具有視覺吸引力的網(wǎng)頁。其中一項(xiàng)增強(qiáng)功能是現(xiàn)代 CSS 中引入的 :has() 偽類。這個(gè)偽類帶來了父級(jí)感知選擇功能，允許您根據(jù)子元素或兄弟元素的存在或狀態(tài)有條件地應(yīng)用樣式。
本文通過示例解釋了 :has() 偽類，以展示其靈活性和強(qiáng)大功能。
什么是 :has() 偽類？
:has() 偽類通常被稱為“父選擇器”，因?yàn)樗试S您根據(jù)元素的子元素、兄弟元素或后代元素設(shè)置樣式。
selector:has(selectorList)
- 選擇器是規(guī)則適用的主要元素。
- selectorList 是條件，可以包含子元素、兄弟元素或與主元素相關(guān)的其他元素。
主要特點(diǎn)
- 父級(jí)意識(shí)：樣式根據(jù)其后代或兄弟元素應(yīng)用于元素。
- 靈活的條件：與 、 ~ 和 > 等組合符配合使用對(duì)于兄弟姐妹和孩子的關(guān)系。
- 改進(jìn)的交互性：可用于在不依賴 JavaScript 的情況下創(chuàng)建動(dòng)態(tài)布局或效果。
實(shí)際示例：使用 :has() 根據(jù)其兄弟姐妹來設(shè)計(jì)盒子的樣式
body {
font-family: sans-serif;
}
.box {
width: 50px;
height: 40px;
background-color: red;
margin: 5px;
}
.border {
border: 2px solid black;
}
.circle {
width: 40px;
height: 40px;
background-color: blue;
border-radius: 25px;
}
/* Highlighting boxes that are followed by a circle */
.box:has(+ .circle) {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS :has() Example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div>
<p><strong>Explanation</strong></p>
<p><em>Basic Styles</em><br>
The .box class defines small red rectangles with a margin.<br>
The .circle class creates blue circular elements.</p>
<p>Dynamic Sizing Using :has():<br>
The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.<br>
This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.</p>
<p><em>Visual Output</em></p>
<p>Initially, the boxes are uniform in size.<br>
The .box element immediately preceding a .circle grows larger due to the :has() rule.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg" class="lazy" alt="CSS :has() Pseudo-Class: A Powerful Selector for Dynamic Styling"></p>
<h2>
Use Cases for :has()
</h2>
<p>The :has() pseudo-class is versatile and can be applied in numerous scenarios:</p>
<h3>
1. <strong>Interactive Layouts</strong>
</h3>
<p>Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.<br>
</p>
<pre class="brush:php;toolbar:false">.card:has(button) {
border: 2px solid green;
}
2. 動(dòng)態(tài)導(dǎo)航菜單
將樣式應(yīng)用到父級(jí)
li:has(ul) {
font-weight: bold;
}
3. 表單驗(yàn)證
突出顯示基于同級(jí)或父元素的無效輸入字段。
.form-group:has(input:invalid) {
border-color: red;
}
4. 自定義兄弟姐妹關(guān)系
根據(jù)其相鄰?fù)?jí)元素設(shè)置元素的樣式。
h1:has(+ p) {
margin-bottom: 10px;
}
:has() 的優(yōu)點(diǎn)
-
提高可讀性：
- 減少了對(duì)復(fù)雜 JavaScript 檢測(cè)和操作 DOM 的需求。
-
提升性能：
- 與類似效果的 JavaScript 解決方案相比，輕量級(jí)且高效。
-
簡(jiǎn)化 CSS:
- 為復(fù)雜關(guān)系啟用聲明式樣式，最大限度地減少額外的類或?qū)傩浴?/li>
瀏覽器支持
到目前為止，大多數(shù)現(xiàn)代瀏覽器都支持 :has() 偽類，包括：
- Chrome：105
- 邊緣：105
- Safari：15.4
- Firefox：正在考慮支持。
對(duì)于較舊的瀏覽器，您可能需要后備或填充。
結(jié)論
:has() 偽類是現(xiàn)代 CSS 中的游戲規(guī)則改變者，帶來了期待已久的父選擇器功能。憑借其根據(jù)元素關(guān)系有條件地設(shè)置元素樣式的能力，它簡(jiǎn)化了 CSS 代碼，增強(qiáng)了動(dòng)態(tài)樣式，并減少了對(duì) JavaScript 進(jìn)行 DOM 操作的依賴。
探索項(xiàng)目中的 :has() 偽類，并為創(chuàng)意和高效的網(wǎng)頁設(shè)計(jì)解鎖新的可能性！
以上是CSS :has() 偽類：強(qiáng)大的動(dòng)態(tài)樣式選擇器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
什么是'渲染障礙CSS”？
Jun 24, 2025 am 12:42 AM
CSS會(huì)阻塞頁面渲染是因?yàn)闉g覽器默認(rèn)將內(nèi)聯(lián)和外部CSS視為關(guān)鍵資源，尤其是使用引入的樣式表、頭部大量?jī)?nèi)聯(lián)CSS以及未優(yōu)化的媒體查詢樣式。1.提取關(guān)鍵CSS并內(nèi)嵌至HTML；2.延遲加載非關(guān)鍵CSS通過JavaScript；3.使用media屬性優(yōu)化加載如打印樣式；4.壓縮合并CSS減少請(qǐng)求。建議使用工具提取關(guān)鍵CSS，結(jié)合rel="preload"異步加載，合理使用media延遲加載，避免過度拆分與復(fù)雜腳本控制。
外部與內(nèi)部CSS：最好的方法是什么？
Jun 20, 2025 am 12:45 AM
thebestapphachforcssdepprodsontheproject'sspefificneeds.forlargerprojects，externalcsSissBetterDuoSmaintoMaintainability andReusability; forsMallerProjectsorsingle-pageApplications，InternaltCsmightBemoresobleable.InternalCsmightBemorese.it.it'sclucialtobalancepopryseceneceenceprodrenceprodrenceNeed
我的CSS必須在較低的情況下嗎？
Jun 19, 2025 am 12:29 AM
否，CSSDOESNOTHAVETOBEINLOWERCASE.CHOMENDENS，使用flowercaseisrecommondendendending：1）一致性和可讀性，2）避免使用促進(jìn)性技術(shù)，3）潛在的Performent FormanceBenefits，以及4）RightCollaboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraborationWithInteams。
CSS案例靈敏度：了解重要的
Jun 20, 2025 am 12:09 AM
cssismostlycaseminemintiment，buturlsandfontfamilynamesarecase敏感。1）屬性和valueslikeColor：紅色; prenotcase-sensive.2）urlsmustmustmatchtheserver'server'scase，例如
什么是AutoPrefixer，它如何工作？
Jul 02, 2025 am 01:15 AM
Autoprefixer是一個(gè)根據(jù)目標(biāo)瀏覽器范圍自動(dòng)為CSS屬性添加廠商前綴的工具。1.它解決了手動(dòng)維護(hù)前綴易出錯(cuò)的問題；2.通過PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用；4.注意事項(xiàng)有不手動(dòng)加前綴、保持配置更新、非所有屬性都加前綴、建議配合預(yù)處理器使用。
什么是CSS計(jì)數(shù)器？
Jun 19, 2025 am 12:34 AM
csscounterscanautomationallymentermentermentections和lists.1）usecounter-ensettoInitializize，反插入式發(fā)芽，andcounter（）orcounters（）
CSS：何時(shí)重要（何時(shí)不）？
Jun 19, 2025 am 12:27 AM
在CSS中，選擇器和屬性名不區(qū)分大小寫，而值、命名顏色、URL和自定義屬性則區(qū)分大小寫。1.選擇器和屬性名不區(qū)分大小寫，例如background-color和Background-Color相同。2.值中的十六進(jìn)制顏色不區(qū)分大小寫，但命名顏色區(qū)分大小寫，如red有效而Red無效。3.URL區(qū)分大小寫，可能導(dǎo)致文件加載問題。4.自定義屬性（變量）區(qū)分大小寫，使用時(shí)需注意大小寫一致。
CSS中的情況敏感性：選擇器，屬性和值所解釋的
Jun 19, 2025 am 12:38 AM
cssselectorsand and propertynamesarecase-insimentimentiment.1）selectorSlike like'div'div'div'div'and'and'and'And'Andiv'areequivalent.2）propertioessuchas'backusuchas'backusuchas'backusuchas'backusuchas'backer'back-and'background and backorgook crolor'backorground-artreateateDthesementhesame.3）
