15 分鐘帶你感受 CSS :has() 選擇器的強大

来源:https://www.cnblogs.com/zsxblog/p/18093007
-Advertisement-
Play Games

最近看到了許多關於 :has() 選擇器的知識點，在此總結下來。 MDN 對 :has() 選擇器 的解釋是這樣的： CSS 函數式偽類 :has() 表示一個元素，如果作為參數傳遞的任何相對選擇器在錨定到該元素時，至少匹配一個元素。這個偽類通過把可容錯相對選擇器列表作為參數，提供了一種針對引用元素 ...


最近看到了許多關於 :has() 選擇器的知識點，在此總結下來。

MDN 對 :has() 選擇器 的解釋是這樣的：

CSS 函數式偽類  :has()  表示一個元素，如果作為參數傳遞的任何相對選擇器在錨定到該元素時，至少匹配一個元素。這個偽類通過把可容錯相對選擇器列表作為參數，提供了一種針對引用元素選擇父元素或者先前的兄弟元素的方法。

下麵一起來感受下 :has() 選擇器的強大之處吧。

:has() 選擇器選擇父元素和前面的兄弟元素

鄰接兄弟選擇器（+）用來選中恰好處於另一個在繼承關係上同級的元素旁邊的物件。例如，選中所有緊隨<p>元素之後的<img>元素：

p + img

通用兄弟關係選擇器（~）用來選中一個元素後面的所有兄弟元素。例如，選中<p>元素之後的所有的<img>元素：

p ~ img

css 並沒有提供直接選擇父元素或者前面的兄弟元素的選擇器，但 :has() 可以做到這點。

1、比如選擇所有包含 <p>元素的父元素：

:has(p)

2、選擇直接後代元素包含 <p>元素的父元素：

:has(> p)

3、選擇直接後代元素包含 <p>元素的父級標簽名是 div 父元素：

div:has(> p)

4、選擇 <p>元素的相鄰的前一個標簽名是 div 的兄弟元素:

div:has(+ p)

5、選擇 <p>元素的前面所有標簽名是 div 的兄弟元素:

div:has(~ p)

:has() 選擇器中的 且 和 或

在 :has() 選擇器中表示 且 和 或 很簡單，例如：

p:has(.a):has(.b) 表示選擇同時包含子元素 a 和 子元素 b 的 元素 p

p:has(.a, .b) 表示選擇包含子元素 a 或者包含子元素 b 的 元素 p

:has() 選擇器選擇一個範圍內的元素

現在有如下元素

<div>
  <h2>標題開始（選擇第一行字體為綠色，最後一行字體為紅色）</h2>
  <p>h2中間第一行</p>
  <h4>h2中間第二行</h4>
  <h5>h2中間最後一行</h5>
  <h2>標題結束</h2>
</div>

要求選擇第一行字體為綠色，最後一行字體為紅色。需要註意的是，中間元素可以是任意的。

cc.png

使用 :has() 實現上面效果，可以這麼做

/* 選擇 h2 中間第一行 */
h2 + :has(~ h2){
  color:green;
}
/* 選擇 h2 中間最後一行 */
h2 ~ :has(+ h2){
  color:red;
}

h2 + :has(~ h2) 表示選擇緊跟著 h2 的並且後面還有 h2 元素的兄弟元素。也就選擇到了 h2 範圍內的第一個元素。

h2 ~ :has(+ h2) 表示選擇 h2 後面的兄弟元素，並且該兄弟元素的下一個兄弟元素是 h2，也就選擇到了 h2 範圍內最後一個元素

那如果要選擇中間所有元素呢，可以這樣做

dd.png

/* 選擇 hr 中間所有行 */
hr ~ :has(~ hr){
  color:blue;
}

:has() 選擇器的應用

1、CSS :has() 選擇器之星級評分

關於星級評分，之前寫過一篇文章分享過 三種方式使用純 CSS 實現星級評分。

這裡介紹下使用 :has() 選擇器 + :not() 選擇器 實現星級評分的方式。

星級評分效果包括滑鼠滑入和點擊，滑入或點擊到第幾顆星的位置，該位置之前的星高亮，之後的星不高亮或者有高亮的則取消高亮；

star.webp

html 結構

<div>
  <input type="radio" name="radio" id="radio1">
  <label for="radio1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio2">
  <label for="radio2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio3">
  <label for="radio3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio4">
  <label for="radio4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio5">
  <label for="radio5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
</div>

為了使星星有點擊效果，利用 radio + label 的方式實現點擊效果；label 代表星星。

當點擊星星時，高亮當前星星

input:checked + label{
    color:gold;
}

當滑鼠移入星星時，高亮當前星星，並且該位置之後的星星取消高亮；

label:hover{
  color:gold;
  & ~ label{
    color:#ccc!important;
  }
}

讓當前位置之前的所有星星也高亮，可以利用 :not ，排除掉當前位置和當前位置之後的星星。

label:not(:hover,:hover ~ *){
  color:gold;
}

並且只有滑鼠滑入時添加這些效果。

div:has(label:hover) label:not(:hover,:hover ~ *){
  color:gold;
}

同樣，當點擊星星時，點亮當前選擇的之前所有的星星也如此

div:has(input:checked) label:not(input:checked ~ label){
  color:gold;
}

完整示例

2、CSS :not 和 :has() 模擬 :only-of-type

有下麵的 html 結構

<div>
  <p>第一頁</p>
  <p class="this">第二頁</p>
  <p>第三頁</p>
  <p>第四頁</p>
</div>

要選擇類名為 this 的元素，並設置顏色為紅色，使用 .this{color:red;} 可以輕鬆做到。

aa.png

如果現在有兩個 div 元素塊

<div>
  <p>第一頁</p>
  <p class="this">第二頁</p>
  <p>第三頁</p>
  <p>第四頁</p>
</div>

<div>
  <p>第一頁</p>
  <p class="this">第二頁</p>
  <p class="this">第三頁</p>
  <p>第四頁</p>
</div>

現要求選擇 div 的子元素中只有含有一個類名為 this 的元素（也就是第一個 div 元素塊），並且設置其顏色為紅色，該怎麼做呢？

:only-of-type 代表了任意一個元素，這個元素沒有其他相同類型的兄弟元素。

但 :only-of-type 判斷是否有相同類型的依據是標簽名，而不是類名。所以並不能達到想要的效果。

//這種寫法是無效的，無法判斷元素有沒有其他相同的類名。
.this:only-of-type {
    color:red;
}

//這種寫法是有效的，但判斷的是沒有相同的 p 的元素，顯然無法滿足上面的要求，但能匹配下麵 ul 中的 p
p:only-of-type {
    color:red;
}

<ul>
  <li>第一頁</li>
  <li class="this">第二頁</li>
  <li class="this">第三頁</li>
  <p>第四頁</p>
</ul>

而 :has 能做到，要選擇前後沒有相同類名的元素 ，也就是排除前後的 .this 。

排除前面的 .this

// 表示選擇前面沒有 .this 的 .this
.this:not(.this ~)

排除後面的 .this,

// 表示排除後面有 .this 的 .this
.this:not(:has(~ .this))

兩個做並集，也就選擇到了唯一的 .this

.this:not(:has(~ .this)):not(.this ~ *){
  color:red;
}

bb.png

完整示例

3、CSS :has() 選擇器之模仿 mac 電腦 dock 欄

利用 :has() 可以選擇到前面的兄弟元素的特點，還能做出下麵的動畫效果

aa.gif

當滑鼠滑入到一個元素時，該元素放大，該元素的前一個元素和後一個元素縮小，除了這三個元素之外的其他元素縮的更小並且有一定透明度；

html 結構如下

<div class="box">
  <div class="son">喬丹</div>
  <div class="son">科比</div>
  <div class="son">詹姆斯</div>
  <div class="son">奧尼爾</div>
  <div class="son">鄧肯</div>
  <div class="son">卡特</div>
  <div class="son">麥迪</div>
  <div class="son">艾弗森</div>
  <div class="son">庫里</div>
  <div class="son">杜蘭特</div>
</div>

關鍵 css 代碼

.son{
    ...
    ...
    ...
    &:hover{
      background-color:#67c23a;
      transform:scale(1.4);
      & + .son{
        transform:scale(1.1); // 後一個相鄰的兄弟元素
      }
    }
  }

讓前一個元素也縮放為原來的 1.1

// 選擇存在 後一個相鄰的被hover的兄弟元素 的元素
.son:has( + .son:hover){
  transform:scale(1.2);
}

然後對這三個元素之外的其他元素縮放為原來的 0.8

.box:has(.son:hover) .son:not(:hover, :has(+ :hover), .son:hover + *) {
  transform:scale(0.8);
  opacity:0.7;
}

.box:has(.son:hover) 表示選擇子元素 son 被 hover 時的 .box

.son:not(:hover, :has(+ :hover), .son:hover + *) 表示排除 son 元素裡面被 hover 的元素，被 hover 的元素的前一個鄰接的兄弟元素，被 hover 的元素的後一個鄰接的兄弟元素；

完整示例

4、CSS :has() 選擇器之單選題

bb.gif

這是個有趣的應用，當選擇的是錯誤的選項時，選擇題的標題和當前選擇項標紅。並且會給正確的選項添加動畫效果提示用戶這才是正確選項。

這裡用 data-correct="false" 表示錯誤的選項，data-correct="true" 表示正確的選項。

<input type="radio" name="option" data-correct="false" id="option1" />
<label for="option1">Responsive design</label>

<input type="radio" name="option" data-correct="true" id="option2" />
<label for="option2">Responsive design</label>

<input type="radio" name="option" data-correct="false" id="option3" />
<label for="option3">Responsive design</label>

選擇錯誤選項時，標紅當前選項。選擇正確選項時標綠當前選項。

.question{
  --correct: #5ed235; // 正確選項的顏色
  --wrong: #f83d56; // 錯誤選項的顏色
  --wrong-bg: rgba(248 ,61, 86,0.8);
  --correct-bg: rgb(94 ,210, 53,0.8);
}

input[data-correct="false"]:checked + label{
  color: #fff;
  background-color: var(--wrong);
  border-color: var(--wrong);
}
input[data-correct="true"]:checked + label{
  color: #fff;
  background-color: var(--correct);
  border-color: var(--correct);
}

選擇錯誤選項時，標紅標題； 這裡用 :has 選擇器獲取子元素中有錯誤選項選中時。

.question:has(input[data-correct="false"]:checked) {
  .questionHeader {
    box-shadow: inset 0 7px 0 0 var(--wrong);
    background-color: var(--wrong-bg);
  }
}

並且給正確選項增加提示動畫

.question:has(input[data-correct="false"]:checked) {
  input[data-correct="true"] + label {
    animation: flash 2s infinite;
  }
}

@keyframes flash {
  0% {
    background-color: white;
  }
  25% {
    background-color: #5ed235;
  }
  50% {
    background-color: white;
  }
  75% {
    background-color: #5ed235;
  }
  100% {
    background-color: white;
  }
}

選擇正確選項時，標綠標題；

.question:has(input[data-correct="true"]:checked) {
  .questionHeader {
    box-shadow: inset 0 7px 0 0 var(--correct);
    background-color: var(--correct-bg);
  }
}

完整示例

總結

本文介紹了 :has() 選擇器的基本用法以及四個實際應用；

  • 選擇父元素和前面的兄弟元素
  • :has() 選擇器中的 且 和 或
  • 選擇一個範圍內的元素

在 :has() 選擇器出來之前，使用 CSS 是無法直接選擇到父級元素和前面的兄弟元素的，但 :has() 選擇器的出現使這個變成了可能；

如果對本文感興趣或對你有幫助，麻煩動動你們的發財手，點點贊~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 鴻蒙HarmonyOS實戰-ArkUI組件（RelativeContainer）
    一、RelativeContainer 1.概述 ArkUI組件中的RelativeContainer是一個相對定位的容器，可以用來將子組件按照相對位置佈局。 在RelativeContainer中，每個子組件都可以設置相對於父容器或其他組件的位置和大小。可以通過設置相對位置、偏移量、寬度和 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（Flex）
    一、Flex 1.概述 Flex佈局它可以讓容器中的子元素具有彈性伸縮性。Flex佈局是一種二維佈局模型，它可以在任意方向上對元素進行排列，並且可以動態地調整元素的大小和位置，以適應不同的屏幕尺寸和設備。通過使用Flex佈局，我們可以實現響應式佈局效果，以適應不同的屏幕尺寸和設備。Flex布 ...
  • 使用 adb 命令修改 Android/data 目錄下的文件(給碧藍檔案國服吃布丁)
    本文記錄如何使用 adb 命令修改 Android/data 目錄下的文件，然後給國服的碧藍檔案打上布丁~ 前言 今天下午刷著刷著微博就看到國服 BA 又又又發了和諧公告 ... 心情複雜。jpg 於是乎終於想起來得吃布丁了，至於此次更新後布丁有沒有用還未知，但還是先搞上 食用方法之前就出了 ...
  • flutter3-dylive仿抖音App實例|Flutter3+Getx實戰短視頻直播應用
    原創研發flutter3+getX+mediaKit仿抖音app短視頻直播實戰Flutter-DouYin。 flutter3_dylive使用最新跨平臺技術flutter3.x+dart3+getx+get_storage+media_kit開發手機端仿抖音app小視頻直播實戰項目。實現了抖音全屏 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（Stack）
    一、Stack 1.概述 HarmonyOS中的層疊佈局Stack是一種可以將多個組件按照一定順序疊放的佈局。Stack佈局中的組件可以是任意類型的組件，且每個組件都可以設置在哪個位置疊放。在疊放時，後添加的組件會自動覆蓋前面添加的組件。 Stack佈局佈局中的每個子組件都可以設置偏移量、旋 ...
  • 如何理解TCP/IP協議?
    一、是什麼 TCP/IP，傳輸控制協議/網際協議，是指能夠在多個不同網路間實現信息傳輸的協議簇 TCP（傳輸控制協議） 一種面向連接的、可靠的、基於位元組流的傳輸層通信協議 IP（網際協議） 用於封包交換數據網路的協議 TCP/IP協議不僅僅指的是TCP和IP兩個協議，而是指一個由FTP、SMTP、T ...
  • 任何樣式，javascript都可以操作，讓你所向披靡
    前言 習慣了在 css 文件裡面編寫樣式，其實JavaScript 的 CSS對象模型也提供了強大的樣式操作能力， 那就隨文章一起看看，有多少能力是你不知道的吧。 樣式來源 客從八方來， 樣式呢， 樣式五方來。 chrome舊版本用戶自定義樣式目錄： %LocalAppData%/Google/Ch ...
  • Vue 腳手架
    VUE 腳手架 腳手架文件結構 ├── node_modules ├── public │ ├── favicon.ico: 頁簽圖標 │ └── index.html: 主頁面 ├── src │ ├── assets: 存放靜態資源 │ │ └── logo.png │ │── componen ...
一周排行
    -Advertisement-
    Play Games
  • （開源）都進來！簡單易懂、功能強大的許可權+可視化流程管理系統
    1、預覽地址：http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展，企業對於信息系統數據的保密工作愈發重視，不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的，如數據列、數據行、數據按鈕 ...
  • 設計模式-C#實現簡單工廠模式
    前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目，然後評論也是比較多，也是準備去學習一下如何確保RabbitMQ的消息可靠性，但是由於時間原因，先來說說設計模式中的簡單工廠模式吧！ 在瞭解簡單工廠模式之前，我們要知道C#是一款面向對象的高級程式語言。它有3大特性，封裝、繼承、多態。 ...
  • Nodify學習 一：介紹與使用
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項，其中包含一系列節點、連接和連接器組件，旨在簡化構建基於節點的工具的過程 ...
  • 使用C#/.NET解析Wiki百科數據實現獲取歷史上的今天
    創建一個webapi項目做測試使用。 創建新控制器，搭建一個基礎框架，包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法，用於獲取指定URL的信息 使用http請求訪問指定url，先運行一下，看看返回的內容。內容如圖右邊所示，實際上是一個Json數據。我們主要解析 大事記 部 ...
  • .NET科普：.NET簡史、.NET Standard以及C#和.NET Framework之間的關係
    最近在不少自媒體上看到有關.NET與C#的資訊與評價，感覺大家對.NET與C#還是不太瞭解，尤其是對2016年6月發佈的跨平臺.NET Core 1.0，更是知之甚少。在考慮一番之後，還是決定寫點東西總結一下，也回顧一下.NET的發展歷史。 首先，你沒看錯，.NET是跨平臺的，可以在Windows、 ...
  • Nodify學習 二：添加節點
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點（nodes） 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（上）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • C# 使用模式匹配的好處,因為好用所以推薦~
    類型檢查和轉換：當你需要檢查對象是否為特定類型，並且希望在同一時間內將其轉換為那個類型時，模式匹配提供了一種更簡潔的方式來完成這一任務，避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯：在處理複雜的條件邏輯時，特別是涉及到多個條件和類型的情況下，使用模式匹配可以使代碼更 ...
  • 推薦一種批量判斷文件是否存在的快速辦法
    在日常開發中，我們經常需要和文件打交道，特別是桌面開發，有時候就會需要載入大批量的文件，而且可能還會存在部分文件缺失的情況，那麼如何才能快速的判斷文件是否存在呢？如果處理不當的，且文件數量比較多的時候，可能會造成卡頓等情況，進而影響程式的使用體驗。今天就以一個簡單的小例子，簡述兩種不同的判斷文件是否... ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（中）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
所有分類