是否有一个 css 选择器可以选择当前元素之外的元素？ [复制]答案

【问题标题】：Is there a css selector which selects an element outside the current element? [duplicate]是否有一个 css 选择器可以选择当前元素之外的元素？ [复制]
【发布时间】：2016-02-27 18:53:42
【问题描述】：

代码比文字更能解释

<div class="parent">
  <span class="child"></span>
</div>
<div class="outside"></div>

我想做的事

.child:hover ? .outside { }

? 是我要查找的选择器

【问题讨论】：

不，不是.child:hover。您可以在 .parent:hover 上选择 .outside。如果你的.child 覆盖了父级的整个空间（我怀疑它是span），那么.child:hover 将有效地等同于.parent:hover。
我对此表示怀疑。 CSS 选择器通常不会以需要向外遍历 DOM 的方式工作（因此之前的同级选择器支持不佳）。
选择器表示元素之间的结构关系。没有可以想象的关系可以在这里使用单个组合器来表达（除了，也许，.child:hoverexisting 在文档树的某处）。
让我们看看这个w3.org/TR/css3-selectors/#selectors
@BoltClock 听起来更像是一个答案而不是评论；）

标签： html css css-selectors

【解决方案1】：

选择器表示元素之间的结构关系。当您为“外部”另一个元素的元素请求选择器时，您正在寻找一个组合器，它说“这个元素出现在这个另一个元素的包含范围之外”。

没有这样的组合器。

您可以想象专门选择 .parent 的 .outside 兄弟姐妹，但随后您会遇到另一个问题，即 there is no parent selector 匹配 .parent 相对于 .child:hover 就像匹配 .child:hover 相对于 @ 987654328@（即.parent > .child:hover）。

另见：How do I select an element based on the state of another element in the page with CSS?

【讨论】：

【解决方案2】：

最简单的方法是让 .parent 类成为需要悬停的元素。

那你就可以了

.parent:hover ~ .outside {

}

【讨论】：

【解决方案3】：

使用以下html 结构：

<div class="parent">
<span class="child"></span>
</div>

<div class="outside"></div>

由于CSS中没有可靠的父选择器，你可以5种方式选择.outsideonly：

直接。
如果它是.parent的兄弟。
如果它是.parent 的子代。
如果它是.child的兄弟。
如果它是.child 的孩子。

由于.outside 既不是.child 的兄弟姐妹，也不是.parent 的孩子，因此您选择.outside 的唯一剩余关系是.parent 的兄弟姐妹。

如果您只想在将鼠标悬停在 .child 上时仅更改 .outside 的显示，这并不是您真正想要的。

当 CSS 已经可以处理任务时，我不喜欢使用 javascript 来影响演示，但在这种情况下，CSS 无法处理任务并且 javascript 是基本的：

var child = document.getElementsByClassName('child')[0];
var outside = document.getElementsByClassName('outside')[0];

function childHover() {
outside.classList.toggle('childhover');
}

function initialiseChildHover() {
child.addEventListener('mouseover',childHover,false);
child.addEventListener('mouseout',childHover,false);
}

window.addEventListener('load',initialiseChildHover,false);

.parent {
display: inline-block;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 1);
}

.child {
display: inline-block;	
width: 100px;
height: 100px;
margin: 50px;
background-color: rgba(255, 255, 0, 1);
}

.outside {
display: inline-block;
width: 150px;
height: 150px;
background-color: rgba(0, 255, 0, 1);
}

.outside.childhover {
background-color: rgba(0, 0, 255, 1);
}

<div class="parent">
<span class="child"></span>
</div>
    
<div class="outside"></div>

【讨论】：