CSS3新增的has伪类选择器，让你能轻松选择父元素

作者：System 时间：2024年08月15日分类：所有,css3 字数：453

CSS3 的 :has() 伪类选择器允许你根据子元素的存在与否来选择父元素。然而，目前（截至我的知识更新日期），:has() 伪类选择器的支持度并不广，仅有部分浏览器支持，并且可能需要前缀。

:has() 伪类选择器的基本语法如下：




selector:has(selector) {
  /* styles */
}

这里的第一个 selector 是你要选择的父元素，第二个 selector 是用来检查父元素是否包含的子元素。

例如，如果你想要选择包含 <p> 元素的 <div>，你可以这样写：




div:has(p) {
  border: 1px solid red;
}

这段 CSS 会给所有包含 <p> 元素的 <div> 一个红色边框。

请注意，:has() 选择器在编写本回答时的支持度非常有限，因此在实际生产环境中使用时请考虑浏览器兼容性。