搜尋
首頁web前端css教學使用 :is()、:where() 和 :has() 偽類別編寫更少的 CSS

CSS 多年來已經發展了很多。它引入了許多新的強大工具,使生活更輕鬆。今天我從這些工具中挑選了其中三個。我們將看到 :is()、:has() 和 :where() 偽類別如何幫助簡化程式碼、使其更具可讀性並減少重複。

本文將向您介紹 :is()、:where() 和 :has() 偽類的含義、方式和原因。您將看到我們如何使用這些偽類透過編寫更少且更優化的程式碼來設計我們的網站,這可能是軟體開發中的絕佳實踐。

當我們將探索偽類時,這裡用一句話進行了基本概述。在 CSS 中,偽類是基於特定條件或狀態應用於元素的規則。點擊此連結了解更多有關偽類的資訊。

我們要解決什麼問題?

使用CSS(級聯樣式表)設計我們的網站時,我們都面臨的一件事是程式碼重複。

例如:

.card .title, .card .body-content, .card .footer-action {
 ...
}

在此範例中,我有一個 .card 選擇器,它的每個子選擇器都會重複該選擇器。但同時,您也會看到相同的樣式套用於它們。

這就是群組選擇器在 CSS 中正常運作的方式,用逗號分隔每個選擇器。這段程式碼工作正常,但我關心的是避免重複和組織不好。

我們在這裡面臨的另一個問題是 CSS 特異性問題。透過使用這樣的程式碼和過多的重複,有時我們會忘記在何處以及在什麼條件下使用什麼樣式。這就是這些偽類發揮重要作用的地方。

讓我們一一看看每個偽類以了解它們的用途。

解釋 :is() 偽類

:is() 偽類別可讓您選擇共享通用樣式的多個元素,而無需重複相同的程式碼。它透過將選擇器組合成一個區塊來簡化選擇器,從而減少冗餘。它將選擇器清單作為參數,並將樣式套用於與該清單中任何選擇器相符的所有元素。

.card :is(.title, .body-content, .footer-action) {
 ...
}

我已經使用了上面的範例,您將看到透過使用 :is() 偽類別分組來減少 CSS 程式碼中的重複是多麼容易。它使代碼保持乾淨和高效。

上面的範例顯示我們提供 .title、.body-content 和 .footer-action 作為 :is() 偽類別的參數。在 :is() 父容器 .card 之前定義,以使其子容器的樣式與其他程式碼分開。這就是 :is() 對與其清單相符的所有參數套用相同樣式的方式。

:is() 偽類廣泛應用於所有主流瀏覽器,下圖來自 caniuse.com,展示了不同版本瀏覽器的詳細概述:

Write less CSS using :is(), :where(), and :has() pseudo-classes

...

解釋 :where() 偽類

:where() 偽類與 :is() 非常相似。我們可以將多個選擇器分組以減少程式碼中的重複。它接受選擇器作為參數。 :is() 和 :where() 偽類之間的主要區別在於,:where() 的特異性為零。這意味著當您想要設定元素樣式而不為 CSS 選擇器添加額外的權重時,它會很有幫助。

使用 :where() 偽類定義的樣式可以輕鬆覆蓋。這意味著 :where() 不會在其選擇器中添加額外的特異性,並且 :where() 偽類內部的樣式是基於選擇器本身的特異性。

使用 :where() 偽類的一個很好的用例是為多個元素定義基本樣式,並且您不希望該樣式影響以後可能會覆蓋它的任何更具體的規則。

這樣 :where() 就可以讓你應用樣式,而不會讓你的 CSS 過於固執地決定哪些規則應該在衝突中獲勝。

/* Applying a default style */
:where(h1, p, a) {
  color: red; 
  font-size: 20px;
}

/* More specific style */
a {
  color: blue;
  font-size: 16px;
}

在上面的範例中,h1、p 和 a 標籤作為參數提供給 :where() 偽類以實現基本樣式。之後,用作獨立標籤及其樣式的標籤可以輕鬆覆蓋 :where().

中定義的樣式

像 :is() 一樣,幾乎所有主流瀏覽器都支援 :where()。請參閱 caniuse.com 上的下圖來檢查支援的瀏覽器版本:

Write less CSS using :is(), :where(), and :has() pseudo-classes

解釋 :has() 偽類

:has() 是父選擇器。這意味著它允許您根據其包含的子元素選擇父元素。這是一件大事,因為 CSS 以前不允許這種行為。你也可以說 :has() 是 CSS 的 if 語句,因為它滿足了條件需求。

假設您只想為包含 img 的 div 設定樣式。這對傳統 CSS 來說是不可能的,但 :has() 使之成為可能。

<!-- Card with Image -->
<div class="card">
      <img  src="/static/imghwm/default1.png" data-src="https://placeholderjs.com/300x300" class="lazy" alt="使用 :is()、:where() 和 :has() 偽類別編寫更少的 CSS" >
      <h1 id="Card-With-Image">Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1 id="Card-With-Image">Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
      <a href="#">Call to Action</a>
    </div>
.card:has(a) {
  background-color: #e6e6e6;
}

.card:has(img) {
  background-color: #979759;
}

Write less CSS using :is(), :where(), and :has() pseudo-classes

In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.

:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:

Write less CSS using :is(), :where(), and :has() pseudo-classes

Conclusion

As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized.

This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity.

This post is originally posted at programmingly.dev. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes

以上是使用 :is()、:where() 和 :has() 偽類別編寫更少的 CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
網站應該在沒有JavaScript的情況下工作嗎?網站應該在沒有JavaScript的情況下工作嗎?Apr 17, 2025 am 09:27 AM

JS派對播客只是一個有趣的一集,他們通過分為兩組兩組來辯論這個經典問題。每個小組都被分配了

可訪問性和網絡性能不是功能,它們是基線可訪問性和網絡性能不是功能,它們是基線Apr 17, 2025 am 09:21 AM

本週,我一直在沉思網絡性能和可訪問性。一切始於伊桑·馬科特(Ethan Marcotte)關於可訪問性的好筆記

具有Netlify和Anymod的快速靜態站點具有Netlify和Anymod的快速靜態站點Apr 17, 2025 am 09:16 AM

在大約10分鐘內,我們&#039; ll設置了一個工作流程,使靜態站點變得簡單。

'關閉主線程”'關閉主線程”Apr 17, 2025 am 09:14 AM

JavaScript就是他們所謂的“單線線程”。正如布萊恩·巴伯(Brian Barbour)所說:

可掩蓋的圖標:PWA的Android自適應圖標可掩蓋的圖標:PWA的Android自適應圖標Apr 17, 2025 am 09:13 AM

有一個新的Web功能,稱為“蒙版”圖標,即將推出Firefox Preview和其他Web瀏覽器。這種新的圖標格式將使您的PWA在Android上具有自己的自適應圖標。

'訂閱播客”鏈接應在哪裡?'訂閱播客”鏈接應在哪裡?Apr 16, 2025 pm 12:04 PM

有一段時間,iTunes是播客中的大狗,因此,如果您將“訂閱播客”鏈接到喜歡:

瀏覽器引擎多樣性瀏覽器引擎多樣性Apr 16, 2025 pm 12:02 PM

當他們在2013年去Chrome時,我們失去了歌劇。與Edge今年早些時候也進行了同樣的交易。邁克·泰勒(Mike Taylor)稱這些變化為“減少

網絡共享的UX注意事項網絡共享的UX注意事項Apr 16, 2025 am 11:59 AM

從垃圾點擊誘餌網站到大多數出版物的最多,共享按鈕長期以來一直無處不在。然而,這些

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),