:is()伪类让无效选择器合法实例页面

展示

去论坛 »

合在一起写

暂无内容

使用 :is() 写

暂无内容

请在不支持:has()伪类的现代浏览器下体验

代码

HTML：

<h4 class="fill">合在一起写</h4>
<div class="container">
    <div class="empty">暂无内容</div>
</div>

<h4 class="fill">使用 :is() 写</h4>
<div class="container2">
    <div class="empty">暂无内容</div>
</div>

CSS：

.container:has( > .empty),
.container.has-empty {
    height: 150px;
    display: grid;
    place-items: center;
}
.container2:is(:has( > .empty), .has-empty) {
    height: 150px;
    display: grid;
    place-items: center;
}

JS：

if (CSS.supports('not selector(:has())')) {
    [...document.querySelectorAll('.empty')].forEach(ele => ele.parentElement.classList.add('has-empty'));
}