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選擇器不工作+，〜

回答

相關問題