【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）

不幸的是，CSS目前没有直接的方式来选择一个元素的父元素。CSS选择器是向下级（子）元素进行选择的，而不是向上级（父）元素进行选择。

然而，有一些技巧和hack可以实现类似的效果，但是需要注意的是，这些方法并不是官方支持的，可能会在未来的CSS标准中被弃用或者不被支持。

1. 使用伪类 :has() 选择器

:has() 选择器是CSS的一个新的实验性特性，它可以选择包含特定子元素的父元素。然而，这个选择器并不能直接用来选择父元素，只能用来检查一个元素是否包含特定的子元素。

例如，你可以选择包含 p 子元素的 div 父元素：

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

2. 使用伪类 :not() 结合 :has() 选择器

你可以使用 :not() 选择器和 :has() 选择器结合，试图找到不包含特定子元素的父元素。但是，这种方法通常不可行，因为它会选择所有不包含特定子元素的父元素，而不是选择包含特定子元素的父元素。

例如，你可以选择不包含 p 子元素的 div 父元素：

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

然而，这种方法并不能实现通过子元素选择父元素的目的，因为它选择的是不包含特定子元素的父元素。

总的来说，虽然CSS没有直接的方式来选择父元素，但是可以使用一些技巧和hack来间接实现这种选择。这些技巧和hack可能会随着CSS的发展而变得不再有效，因此在实际的生产环境中，应该尽量避免使用这些方法。如果需要在JavaScript中基于元素的父元素来进行操作，可以使用JavaScript DOM API来获取和操作父元素。