CSS中的功能：has（）

>其他開發人員，讓我們深入了解CSS的:has()迅速成為前端開發人員的最愛，因為它的能力基於元素的內部結構來精確控製樣式。 讓我們探索其功能和實用應用。 :has()

理解 :has()

偽級優雅級別僅在包含特定的子元素時才能使用元素。 將其視為有條件的樣式：“如果此元素包含:has()，則style> 元素。” >

語法：>

:has(<direct-selector>) {
  /* Styles applied if the direct selector is found within the parent */
}</direct-selector>

解決共同的樣式挑戰

以前>以前，僅根據其孩子的存在來造成父元素。

>優雅地解決這個問題。

:has()考慮一個博客文章列表，其中>（字幕）。 我們可能只想在直接存在之後直接存在

時直觀地強調<h1></h1>>。 在<h2></h2>之前，這需要JavaScript。 <h1></h1> <h2></h2>:has()舊（JavaScript）方式：

>

此JavaScript代碼通過>元素進行迭代，檢查以下

>，並添加了用於樣式的類。 >

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

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

新的（CSS）方式：<h1></h1>> <h2></h2>

這個簡潔的CSS使用

和相鄰的同胞組合（）實現了相同的結果。 它僅在接下來的時才能藍色。

>

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

實用:has()示例 <h1></h1> <h2></h2>讓我們探索幾個場景，其中

>:has()>示例1：

html：:has()>

> css：

只有第一個將是藍色的，因為它隨後是

。

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>...</p>

<h1>This is a test</h1>
<p>...</p>

>

>示例2：帶有字幕的造型圖像>

>通常，我們使用圖像和標題。

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

可以增強圖像呈現。

> <h1></h1><h2></h2> html：

>

> css：

:has()

僅當它包含a

。 >瀏覽器支持和社區使用

<figure>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="The Power of :has() in CSS ">
  <figcaption>My Aunt Sally's Doggo</figcaption>
</figure>

>

>在現代瀏覽器中享有廣泛的支持（Check Caniuse.com以獲取詳細的瀏覽器兼容性信息）。 社區反饋揭示了創造性用途，包括可訪問性增強。

重要的考慮因素：

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

• 特異性：:has()>繼承其最特定的內部選擇器的特異性。
>瀏覽器的兼容性：
• 的失敗將級聯級聯 :has()嵌套：:is()不能嵌套在另一個:where()中。
pseudo元素：偽元素在
• >中不是有效的選擇器。 :has() :has()
• 結論： :has()

>是CSS阿森納的強大補充，可以使以前依賴於JavaScript的優雅和高效的造型。 通過了解其功能和局限性，我們可以提高我們的網絡開發技能並創建更健壯和可維護的代碼。

進一步讀取：

:has()

> isha deed的文章：has（）

>

css-tricks on：has（）

• Chrome博客文章：has（）
• > 在：has（）selector
上

以上是CSS中的功能：has（）的詳細內容。更多資訊請關注PHP中文網其他相關文章！