CSS 使用选择器获取最近的父元素（不包括当前元素）

在本文中，我们将介绍如何使用CSS选择器来获取一个元素的最近的父元素，但要排除掉当前元素。

阅读更多：CSS 教程

什么是最近的父元素？

在HTML中，元素与元素之间存在父子关系。每个元素都可以有一个或多个父元素。最近的父元素指的是该元素的直接父元素或距离该元素最近的父元素。

使用选择器获取最近的父元素

CSS并没有直接提供获取最近的父元素的方法，但我们可以使用一些选择器的特性来达到这个目的。

方案一：使用通用选择器和 :has 伪类选择器

<style>
.parent {
    background-color: lightblue;
    padding: 20px;
}

.child {
    background-color: lightgreen;
    padding: 10px;
}

.parent:has(.child) {
    background-color: lightgray;
}
</style>

<div class="parent">
    <div class="child">
        <p>Hello, World!</p>
    </div>
</div>

在上面的示例中，我们通过给最近的父元素添加特定的样式来实现获取最近的父元素，但要排除当前元素。这里使用了 :has 伪类选择器，它可以选择具有指定后代的父元素。

方案二：使用 :not 伪类选择器

<style>
.parent {
    background-color: lightblue;
    padding: 20px;
}

.child {
    background-color: lightgreen;
    padding: 10px;
}

.parent:not(.child) {
    background-color: lightgray;
}
</style>

<div class="parent">
    <div class="child">
        <p>Hello, World!</p>
    </div>
</div>

在这个示例中，我们使用 :not 伪类选择器来排除当前元素的样式。这样我们就可以通过添加一个与当前元素相反的样式来实现获取最近的父元素。

方案三：使用非标准的选择器（仅针对一些浏览器）

有一些非标准的选择器在某些浏览器中可以用来获取最近的父元素。例如：:has-parent 和 :closest 选择器。但是，这些选择器并不是CSS核心规范的一部分，因此可能不是所有浏览器都支持。

<style>
.parent {
    background-color: lightblue;
    padding: 20px;
}

.child {
    background-color: lightgreen;
    padding: 10px;
}

.parent:closest(div) {
    background-color: lightgray;
}
</style>

<div class="parent">
    <div class="child">
        <p>Hello, World!</p>
    </div>
</div>