🔥提升你的CSS选择器技能：巧用:has实现父选择器和前兄弟选择器 🎯🔥

考虑到性能问题，之前版本的css不支持父选择器，兄弟选择器也只是支持了后兄弟选择器，而没有支持后兄弟选择器。直到:has的横空出世，解决这些问题都变得非常简单。

什么是 :has 伪类？

:has 伪类是CSS选择器的一部分，它允许你选择拥有符合某些条件的后代元素的父元素。

详细语法

父选择器

.container:has(a) {
    color: red;
}

前兄弟选择器

之前的兄弟选择器只支持选择后边的元素

/* 紧跟图片的段落将被选中 */
img + p {
  font-weight: bold;
}

利用:has可选择前边的兄弟元素

.container:has(+p) {
    color: red;
}

包含任何一个子元素就可被选中

.container:has(p, h1) {
    color: red;
}

同时包含才可被选中

.container:has(h1):has(a) {
    color: red;
}

与其他伪类组合使用

不包含h1标签的父节点会被选中

.container:not(:has(h1)) {
    color: red;
}

兼容性

到目前为止，除了firefox，兼容性都还不错。