CSS选择器不工作+，〜

这是推动我疯了：CSS选择器不工作+，〜

<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle fa-stack-2x fcc1" style=""></i> 
    <i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1"></i> 
</span> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle fa-stack-2x fcc2" style=""></i> 
    <i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2"></i> 
</span> 

<style> 
.fccc1:hover, .fccc2:hover, { 
color:#115ebb!important; 
} 
.fccc1:hover + .fcc1 { 
color:white!important; 
} 
.fccc2:hover + .fcc2 { 
color:white!important; 
} 
</style>

的悬停的第一个CSS规则可以正常使用。然而，第二个和第三个css规则，以便在徘徊时更改其他类不起作用。我没有看到代码中的任何错误，并且我理解这应该起作用。我也试过用+和一个〜选择器。

任何帮助appriciated。

来源

2016-06-14 Duno234

对不起误读的类名，因此错误的评论早。 class ='fcc1''的元素在DOM中具有'class ='fccc1''的元素之上，并且CSS选择器不能向上遍历DOM。您必须交换元素的顺序或使用JS。 – Harry

CSS选择器不能向上遍历DOM。 <==对我有意义，可能是答案。 – Duno234

使用'flex'和'order'可以在视觉上向上遍历......我应该为此发布一个答案吗？ – LGSon

这里有一个窍门遍历向上，在视觉上，使用flex和order

body { 
 
    background: gray; 
 
} 
 
.fa-stack { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.fa-stack i:nth-child(1) { 
 
    order: 2; 
 
} 
 
.fa-stack i:nth-child(2) { 
 
    order: 1; 
 
} 
 
    
 
.fccc1:hover, .fccc2:hover { 
 
color: #115ebb!important; 
 
} 
 
.fccc1:hover + .fcc1 { 
 
color: white!important; 
 
} 
 
.fccc2:hover + .fcc2 { 
 
color: white!important; 
 
}

<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-whatsapp fa-stack-1x fa-inverse fccc1">Second</i> 
 
    <i class="fa fa-circle fa-stack-2x fcc1" style="">First</i> 
 
</span> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-camera-retro fa-stack-1x fa-inverse fccc2">Second</i> 
 
    <i class="fa fa-circle fa-stack-2x fcc2" style="">First</i> 
 
</span>

来源

2016-06-14 17:47:00 LGSon

哈利，DaniP和LGSon，谢谢你完全理解我的问题，LGSon花时间发表详细的例子如何解决。 – Duno234

div + p - 选择，是经过<div>元素

立即放入仅供参考所有<p>元素 - CSS Selectors

来源

2016-06-14 17:32:41 SESN

你的第一个规则可以同时处理.fccc1和.fccc2，这两者同时存在。

但是，您的第二条规则是针对另一个.fccc1元素后面的.fccc1元素。在你的情况下，这不存在。前面的元素是.fcc1。您的规则将需要：

.fcc1:hover + .fccc1

来源

2016-06-14 17:34:48

CSS选择器不工作+，〜

回答

相关问题