CSS中是否存在父选择器？

技术背景

在传统的CSS选择器中，主要是从父元素向子元素方向进行选择，即通过选择器来匹配子元素。然而，在实际开发中，有时需要根据子元素的状态来选择父元素，比如当子元素具有特定类名、处于特定状态时，对其父元素应用样式。但CSS 2中并没有直接提供父选择器的功能。

实现步骤

使用`:has()`伪类

W3C的Selectors Level 4工作草案引入了:has()伪类，为选择父元素提供了能力。目前主流浏览器基本都支持该选择器，可参考https://caniuse.com/css-has检查目标浏览器的支持情况。

示例代码

1
2
3

li:has(> a.active) { 
    /* 应用到li标签的样式 */ 
}

上述代码会选择包含具有active类的a元素的li元素。

利用JavaScript

如果目标浏览器不完全支持:has()伪类，可以借助JavaScript来实现。

示例代码

1	`$("a.active").parents('li').css("property", "value");`

上述代码使用jQuery选择具有active类的a元素，并选择其父元素li，然后为其设置样式。

使用`:focus-within`伪元素

:focus-within伪元素允许在后代元素获得焦点时选择父元素。

示例代码

1
2
3

.parent:focus-within {
    background: hsl(199deg, 65%, 73%);
}

上述代码会在.parent元素的后代元素获得焦点时，为.parent元素设置背景颜色。

使用EQCSS插件

EQCSS插件扩展了CSS，增加了一些非标准特性，其中包括父选择器。

示例代码

@element 'a.active' {
    $parent {
        background: red;
    }
}

上述代码会为具有active类的a元素的父元素设置背景颜色为红色。

核心代码

选择包含特定子元素的父元素

1
2
3

div:has(p) {
    color: red;
}

选择具有直接子元素的父元素

1
2
3

div:has(> span) {
    color: red;
}

选择具有特定兄弟元素的元素

1
2
3

span:has(+ div) {
    color: red;
}

选择不包含特定子元素的元素

1
2
3

div:not(:has(p)) {
    color: red;
}

选择仅包含文本节点的元素

1
2
3

div:not(:has(*)) {
    background: green;
}

最佳实践

兼容性检查：在使用:has()伪类之前，务必检查目标浏览器的支持情况。
性能考虑：由于选择父元素可能需要更多的处理资源，应尽量避免在性能敏感的场景中过度使用。
代码可读性：合理使用选择器，确保代码具有良好的可读性和可维护性。

常见问题

浏览器兼容性问题

并非所有浏览器都支持:has()伪类和其他新的选择器特性。可以使用Can I Use网站检查目标浏览器的支持情况，并根据情况选择合适的解决方案。

性能问题

选择父元素可能会增加浏览器的处理负担，特别是在页面元素较多的情况下。尽量优化选择器，减少不必要的查询。