嘿，你們這些優秀的開發人員！在這篇文章中，我們將探討使用 :has() 在您的下一個網路項目中。 :has() 相對較新，但透過提供對 UI 中各種元素的控製而在前端社群中廣受歡迎。讓我們看看什麼是偽類以及如何使用它。

句法

:has() 如果我們在元素內部搜尋的任何內容被發現並被考慮在內，CSS 偽類可以幫助設定元素的樣式。就好像說， “如果這個盒子裡有特定的東西，那麼就以這種方式並且僅以這種方式設計盒子。”

:has(<direct-selector>) {
  /* ... */
}

造型問題

在過去的幾年裡，我們無法使用 CSS 來根據父元素的直接子元素或基於另一個元素的元素來設計父元素的樣式。如果我們必須這樣做，我們需要使用一些 JavaScript 並根據 HTML 的結構開啟/關閉類別。 :has() 解決了這個問題。

假設您有一個 1 級標題元素 (h1）這是部落格清單頁面上貼文或類似性質的內容的標題，然後您就有了標題等級 2（h2) 直接跟隨它。這個 h2 可以是貼文的副標題。如果說 h2 存在、重要且緊接在 h1，您可能想讓 h1 脫穎而出。在此之前，您必須編寫 JS 函數。

老派方式 – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

這個 JS 函數正在尋找所有具有 h2 繼續它，並應用一類突出顯示內容來使 h1 作為一篇重要的文章脫穎而出。

隨著現代 CSS 的流行，新的和改進的！我們在瀏覽器中可以做的事情的功能已經取得了長足的進步。現在，我們可以利用 CSS 來完成傳統上必須使用 JavaScript 完成的事情，不是所有事情，而是某些事情。

新學校之道－CSS

h1:has(+ h2) {
    color: blue;
}

在上面扔一些 :has() ！

現在你可以使用了 :has() 實現與 JS 函數相同的功能。此 CSS 正在檢查任何 h1 並使用 兄弟組合器 檢查緊接著的 h2，並向文字添加藍色。以下是幾個用例 :has() 可以派上用場。

:has 選擇器範例 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

的CSS

h1:has(+ h2) {
    color: blue;
}

:has 選擇器範例 2

很多時候，我們身為網路工作者正在操縱或處理影像。我們可以使用的工具 多雲的 提供對圖像進行各種變換，但通常我們想要添加陰影、邊框半徑和標題（不要與 alt 屬性中的替代文字混淆）。

下面的例子是使用 :has() 查看圖形或圖像是否具有Figcaption元素，如果有，它會應用一些背景和邊框半徑以使圖像脫穎而出。

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

的CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

我可以嗎 :has() 是什麼？

你可以看到 :has() 在現代瀏覽器中擁有強大的支援。

:has() 在社區！

我在 Twitter 上聯繫了我的網絡，以了解我的同行如何使用 :has() 在他們的日常工作中，這就是他們不得不說的話。

svg:has(> #Mail) {
  stroke-width: 1;
}

很高興看到社群成員如何使用現代 CSS 來解決現實世界的問題，同時也向 Abbey 出於可訪問性的原因使用它表示感謝！

注意事項

使用時有幾個要點要注意 :has() 重點引用自 MDN。

• 偽類在其參數中呈現最具體選擇器的特異性
• 如果 :has() 瀏覽器不支援偽類本身，整個選擇器區塊將失敗，除非 :has() 位於寬容選擇器清單中，例如 :is() 和 :where()
• :has() 偽類不能嵌套在另一個偽類中 :has() 
• 偽元素也不是有效的選擇器 :has() 和偽元素不是有效的錨點 :has()

結論

利用 CSS 的強大功能，包括進階功能，例如 :has() 偽類，使我們能夠打造卓越的網路體驗。 CSS 的優點在於它的級聯和特異性…最好的部分，使我們能夠充分利用它的潛力。透過利用 CSS 的功能，我們可以推動網頁設計和開發向前發展，釋放新的可能性並創建突破性的使用者介面。

友情鏈接：

• SEO 支持的內容和 PR 分發。 今天得到放大。
• PlatoData.Network 垂直生成人工智能。 賦予自己力量。 訪問這裡。
• 柏拉圖愛流。 Web3 智能。 知識放大。 訪問這裡。
• 柏拉圖ESG。 碳， 清潔科技, 能源， 環境， 太陽能， 廢物管理。 訪問這裡。
• 柏拉圖健康。 生物技術和臨床試驗情報。 訪問這裡。
• 資源： https://css-tricks.com/the-power-of-has-in-css/