父母同级元素的孩子的CSS选择器 [英] CSS Selector for Child of Parent's Sibling Element

问题描述

如果我有这个话:

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
</div>
<div class="sibling">
    <div id="change">Hello</div>
</div>

当悬停在#trigger上时，是否有一个选择器可以抓住#change?

Is there a selector to grab #change when #trigger is hovered upon?

就像悬停#trigger一样，更改.sibling的#change元素的背景.

Like upon hover of #trigger, change the background of .sibling's #change element.

我正在寻找不使用JavaScript的纯CSS解决方案.

I'm looking for a pure CSS solution without javascript.

推荐答案

总之:否.

鉴于HTML的当前结构(以及CSS选择器的当前状态)，这是不可能的.也许我们会在CSS4中得到类似的东西，但是最好将这种遍历留给Javascript.

Given the current structure of your HTML (and the current state of CSS selectors), this is not possible. Perhaps we will get something like this in CSS4, but traversal like this is best left up to Javascript.

您显然可以重组标记，并使用同级选择器:

You can obviously restructure your markup, and use the sibling selector:

HTML

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
    <div class="sibling">
       <div id="change">Hello</div>
    </div>
</div>

CSS

#trigger:hover + .sibling #change {
  color:red; 
}

codepen

这篇关于父母同级元素的孩子的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！