:has()伪类基本使用实例页面

展示

去论坛 »

包含图片的链接

前面兄弟元素匹配

你确定删除吗？

删除后数据不可恢复。

参数是选择器列表

只有p元素

不仅有h5元素

还有p元素

和:not()伪类混用

只有p元素

不仅有h5元素

还有p元素

代码

HTML：

<h4 class="fill">包含图片的链接</h4>
<a href="">
    <img src="/images/common/1.jpg" width="256">
</a>
<h4 class="fill">前面兄弟元素匹配</h4>
<h5>你确定删除吗？</h5>
<p>删除后数据不可恢复。</p>

<h4 class="fill">参数是选择器列表</h4>
<article>
    <p>只有p元素</p>
</article>
<article>
    <h5>不仅有h5元素</h5>
    <p>还有p元素</p>
</article>

<h4 class="fill">和:not()伪类混用</h4>
<section>
    <p>只有p元素</p>
</section>
<section>
    <h5>不仅有h5元素</h5>
    <p>还有p元素</p>
</section>

CSS：

a:has(> img) { display: block; }
h5:has(+ p) { font-size: 1rem; translate: 0 10px; }
article:has(h5, p) { background-color: #f0f3f9; }
/* article:has(h5):has(p) { background-color: #f0f3f9; } */

section:not(:has(h5)) {
    border: skyblue solid;
}
section:has(:not(h5)) {
    color: deepskyblue;
}