Question

我正在寻找技术解释，而不是解决方案。例如，如果我有以下HTML结构：

<div class="container">
    <div class="box1">
        <div class="square"></div>
    </div>
    <div class="box2">
        <div class="circle"></div>
    </div>
</div>

为什么我无法创建CSS规则，如果我将鼠标悬停在.square上，则更改.circle的背景颜色？换句话说，为什么我不能影响另一个元素范围之外的元素呢？

此外，我们可以这样做吗？是否有任何未来计划允许这种行为？

Answer 1

正如您所指出的，目前无法在CSS2 / CSS3规范中选择元素的父级。

答案：

它只是不符合规范，即当前的性能考虑因素以及CSS中特异性的工作方式。

目前的CSS选择器规格都没有：

与此同时，如果您需要选择父元素，则必须使用JavaScript。

Selectors Level 4 Working Draft包含一个:has()伪类，其作用与jQuery实现相同。截至2015年，这在任何浏览器中都不可用。

示例有（）

container:has(> a.active) { /* styles to apply to the container tag */ }

Answer 2

This website解释了为什么我们不能拥有父选择器 - 这是为了在另一个范围内选择标记所需的选择。

据我所知，原因不是我们无法拥有它，而只是因为性能需求太大。

可以做到 - 但至少可以说兼容性是可怕的。那么，为什么在您需要替代方案时难以支持的实施呢？使用JavaScript或其他客户端语言更容易。

Answer 3

嗯，这是好奇心。那么，:has()是最好的方法，肯定是未来。但是在不同的场景中，你有不同的创作可能性。

例如，在我向你求助的上下文中，元素是绝对定位的。我们现在是elemetns之间的距离。

我们可以使用伪元素after或before并将其置于另一个之上。现在您可以使用:hover。

http://codepen.io/luarmr/pen/jPGYoM

CSS

/*Normal css*/

[class^='box']{
  position: absolute;
  top:10px;
  border:1px solid #fabada;
}

[class^='box']:hover{
  background: #0da;
}

.box1{
  left:10px;
}

.box2{
  left:240px;
}

.square, .circle{
  margin:10px;
  height:100px;
  width:100px;
  background:#fe0;
}

.circle{
  border-radius:50%;
}


/*TRICK*/

[class^='box']:after{
  content:'';
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  z-index:1;
}

.box1:after{
  left:230px;∑
}

.box2:after{
  left:-230px;
}

Answer 4

虽然你无法在CSS选择器中定位父项（如ѺȐeallү指出的那样），但你仍然可以设置兄弟姐妹的风格。所以，你可以设计一些没有悬停的元素：

＆＃13;

.square {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: none #4679BD;
}
.circle {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: none #FFB900;
    border-radius: 50%;
}
.triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 50px solid green;
}
.square:hover ~ .circle {
    background: none #118889;
}
.square:hover ~ .triangle {
    border-left: 50px solid #4D4D4D;
}
.circle:hover + * {
	border-left: 50px solid lime;
}

＆＃13;

<div class="container">
        <div class="square"></div>
        <div class="circle"></div>
        <div class="triangle"></div>
</div>

＆＃13;

此pure css slide toggle example中使用了相同的方法。

影响另一个元素范围之外的元素

4 个答案:

答案：

示例有（）