CSS :has 选择器

完整CSS选择器参考手册 完整CSS选择器参考手册

实例

我们希望为包含 <div> 子元素的 .parent 元素应用样式：

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

尝试一下 »

定义和使用

CSS 的 :has 伪类是一种选择器，它允许你根据其后代元素来选择一个元素。

:has 伪类在 CSS 选择器中非常有用，因为它可以基于更复杂的条件来选择元素。

  • :has 伪类在 CSS 中是相对较新的功能，可能不被所有浏览器支持。在使用之前，建议检查浏览器的兼容性。
  • :has 伪类不能与 * 选择器一起使用，它只能与类型选择器（如 div、span 等）或类选择器一起使用。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器
:invalid 10.0 10.0 4.0 5.0 10.0

CSS 语法

parent:has(selector) {
    /* 样式规则 */
}
  • parent：表示父元素的选择器。
  • selector：表示你希望在父元素中找到的子元素的选择器。

更多实例

选择包含特定类名的元素

实例

如果你想要选择包含类名为 .active 的子元素的父元素：

div:has(.active) { background-color: yellow; }

尝试一下 »

选择包含多个特定子元素的元素

实例

如果你想要选择同时包含 <li> 和 <div> 子元素的 <ul> 元素：

ul:has(li):has(div) { border: 2px dashed blue; }

尝试一下 »

以上代码将为同时包含 <li> 和 <div> 子元素的 <ul> 元素添加蓝色虚线边框。

完整CSS选择器参考手册 完整CSS选择器参考手册