正如其他一些人所提到的，没有一种方法可以仅使用CSS来设置元素的父级，但以下方法适用于jQuery：

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

只是一个水平菜单的想法。。。

HTML的一部分

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS的一部分

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

更新的演示和其余代码

另一个示例是如何将其用于文本输入-选择父字段集

没有css（因此在css预处理器中）父选择器，因为“css工作组先前拒绝父选择器建议的主要原因与浏览器性能和增量渲染问题有关。”

更新2022 CSS选择器4

在CSS Selectors 4规范中，CSS引入了一个名为：has（）的新选择器，它最终允许我们选择父级。这意味着我们将能够针对一个包含特定子元素的CSS元素。这在Safari和Chrome105中都已得到支持。显示完整的支撑台在这里

父选择器工作

在CSS中，如果我们想选择一些东西，我们使用DOM下面的选择器。

例如，在div标记中选择p标记如下所示：

 div p {
   color: red;
}

不过，到目前为止，我们还无法真正选择其中包含p标记的div标记，这意味着我们不得不求助于Javascript。没有在CSS中实现这一点的主要原因是，这是一个相当昂贵的操作。CSS解析速度相对较快，但选择父标记需要相对较大的处理量。

使用：has选择器，我们现在可以选择具有p子级的div元素，或选择器的任何正常组合。

例如，选择带有子p的div现在看起来像这样：

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

这将使任何带有子p的div变为红色。

将父选择与其他选择器组合

就像任何其他CSS选择器一样，我们可以针对特定情况组合这些选择器。例如，如果只选择具有直接span子级的div标记：

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

正如：的词汇所暗示的，它不仅仅局限于父母的选择。

例如，下面我们可以选择一个span，该span：有一个同级div：

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

甚至，通过使用：not（）选择器选择一个没有子元素的元素。

例如，下面将选择任何没有p子级的div：

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

选择仅包含CSS中文本的元素

CSS中一个非常常见的问题是：empty标记不选择包含任何文本的元素，因此有时元素可以包含一个空格，而：empty将不适用。has选择器使我们能够选择只包含文本节点而不包含其他子元素的元素。

虽然这并不是简单的空元素和空格的完美解决方案（因为这将选择任何只包含文本的元素，而不包含额外的HTML DOM元素），但它确实让我们能够选择只包含文本节点的DOM元素，这在以前是不可能的。我们可以通过以下代码实现这一点：

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

至少包括CSS 3，你不能这样选择。但是现在用JavaScript可以很容易地完成，你只需要添加一些普通的JavaScript，注意代码很短。

cells=document.querySelectorAll（'div'）；[].forEach.call（单元格，函数（el）{//console.log（el.nodeName）如果（el.hasChildNodes（）&&el.firstChild.nodeName==“A”）{控制台日志（el）};});彼得</div><div><a href=“#”>Jackson链接</a></div>菲利普</div><div><a href=“#”>Pullman链接</a></div>

基于子元素更改父元素当前只能在父元素中有＜input＞元素时发生。当输入获得焦点时，其对应的父元素可能会使用CSS受到影响。

以下示例将帮助您理解在CSS中使用：focus in。

.外部div{宽度：400px；高度：400px；填充：50px；浮动：左侧}.outer div：聚焦在{背景：红色；}.内部div{宽度：200px；高度：200px；浮动：左侧；背景：黄色；填充：50px；}<div class=“outer div”><div class=“inner div”>我想根据inner-div更改外部div（背景色）类。有可能吗？<input type=“text”placeholder=“Name”/></div></div>