好吧，这个问题以前被问过很多次，简短的典型答案是:它不能通过纯CSS来完成。它在名称中:级联样式表只支持级联方向的样式化，而不支持向上样式化。

但是在大多数希望达到这种效果的情况下，例如在给定的示例中，仍然有可能使用这些级联特性来达到所需的效果。考虑这个伪标记:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

诀窍是给兄弟元素赋予与父元素相同的大小和位置，并对兄弟元素而不是父元素设置样式。这将看起来像父样式!

现在，如何样式的兄弟?

当悬浮子进程时，父进程也是悬浮的，但兄弟进程不是悬浮的。兄弟姐妹也一样。这总结了三个可能的CSS选择器路径来样式化兄弟:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

这些不同的路径提供了一些很好的可能性。例如，在问题中的例子中使用这个技巧会导致这样的结果:

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

显然，在大多数情况下，这个技巧依赖于使用绝对定位来给兄弟元素与父元素相同的大小，ánd仍然让子元素出现在父元素中。

有时，为了选择一个特定的元素，有必要使用一个更有条件的选择器路径，如本图所示，它在树菜单中多次实现了这个技巧。真的很不错。

如前所述，“没有CSS选择器来选择所选子对象的父对象”。

所以你要么:

使用NGLN的回答中描述的CSS hack 使用javascript -和jQuery最有可能

下面是javascript/jQuery解决方案的示例

javascript方面:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

在CSS方面，你会有这样的东西:

.is-hover {
  background-color: red;
}

好吧，这个问题以前被问过很多次，简短的典型答案是:它不能通过纯CSS来完成。它在名称中:级联样式表只支持级联方向的样式化，而不支持向上样式化。

但是在大多数希望达到这种效果的情况下，例如在给定的示例中，仍然有可能使用这些级联特性来达到所需的效果。考虑这个伪标记:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

诀窍是给兄弟元素赋予与父元素相同的大小和位置，并对兄弟元素而不是父元素设置样式。这将看起来像父样式!

现在，如何样式的兄弟?

当悬浮子进程时，父进程也是悬浮的，但兄弟进程不是悬浮的。兄弟姐妹也一样。这总结了三个可能的CSS选择器路径来样式化兄弟:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

这些不同的路径提供了一些很好的可能性。例如，在问题中的例子中使用这个技巧会导致这样的结果:

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

显然，在大多数情况下，这个技巧依赖于使用绝对定位来给兄弟元素与父元素相同的大小，ánd仍然让子元素出现在父元素中。

有时，为了选择一个特定的元素，有必要使用一个更有条件的选择器路径，如本图所示，它在树菜单中多次实现了这个技巧。真的很不错。

我知道这是一个老问题，但我只是设法在没有伪子程序(而是伪包装器)的情况下做到了这一点。

如果你将父div设置为没有指针事件，然后将子div的指针事件设置为auto，它可以工作:) 注意，<img>标记(例如)并不能做到这一点。 还要记住，对于其他拥有自己的事件侦听器的子节点，将pointer-events设置为auto，否则它们将失去单击功能。

div.parent { pointer-events:没有; ｝ div.child { pointer-events:汽车; ｝ div.parent:{徘徊 背景:黄色; ｝ < div class = "父" > 父母-你可以悬停在这里，它不会触发 <div class="child">改为悬停在child上!< / div > < / div >

编辑: 正如影子向导所指出的:值得一提的是，这将不适用于IE10及以下。(旧版本的FF和Chrome也，见这里)

没有CSS选择器来选择所选子节点的父节点。

你可以用JavaScript来做

这在Sass中是非常容易做到的!不要为此钻研JavaScript。sass中的&选择器就是这样做的。

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand