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中文网其他相关文章！