相同的css的類選擇器不工作的多個組合

當我嘗試應用簡單的CSS基於CSS選擇器不同組合的選擇器具有相同的CSS風格的一些DIV，它沒有得到應用。如果我爲每個選擇器組合單獨編寫此css，則它正在工作。我不明白爲什麼它失敗了。如果我的CSS選擇器工作，然後「左DIV |左得分」應該去右側。相同的css的類選擇器不工作的多個組合

的jsfiddle：https://jsfiddle.net/wf2y7m01/

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

div.team-info.team-pre-info.lpanel.Soccer 
div.team-info.team-final-in-info.lpanel.Soccer 
div.score-box.score-box-home.Soccer { 
    float:right; 
} 

div.team-info.team-pre-info.rpanel.Soccer 
div.team-info.team-final-in-info.rpanel.Soccer 
div.score-box.score-box-away.Soccer { 
    float:left; 
} 

</style> 
</head> 
<body> 

<div style="color:#0000FF;width:500px"> 

    <div class="team-info team-pre-info lpanel Soccer" style="display:inline;"> 
     Left DIV 
    <div style="display:inline;"> | Left Score</div> 
    </div> 


<div style="display:inline;"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Middle DIV&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    </div> 



<div class="team-info team-pre-info rpanel Soccer" style="display:inline;"> 
<div style="display:inline;"> Right Score |</div> 
     Right DIV 

    </div> 
</div> 

</body> 
</html>

來源

2016-04-26 user1614862

你需要用逗號（https://jsfiddle.net/dsp4w224/）分隔選擇：

div.team-info.team-pre-info.lpanel.Soccer, 
div.team-info.team-final-in-info.lpanel.Soccer, 
div.score-box.score-box-home.Soccer { 
    float:right; 
} 

div.team-info.team-pre-info.rpanel.Soccer, 
div.team-info.team-final-in-info.rpanel.Soccer, 
div.score-box.score-box-away.Soccer { 
    float:left; 
}

來源

2016-04-26 08:14:15 sQer

個人選擇應該是逗號分隔，不空間分開。在CSS選擇器中空格字符實際上是descendant selector含義如下選擇：

div.team-info.team-pre-info.lpanel.Soccer div.team-info.team-final-in-info.lpanel.Soccer div.score-box.score-box-home.Soccer

正在尋找與類.score-box一個div，.score-box-home & .Soccer這是另一個div與類.team-info一（盛大）的孩子，.team-final-in-info，.lpanel & .Soccer which is itself a (grand)child of a div with the classes .team-info , .team-pre-info , .lpanel & .Soccer`。

來源

2016-04-26 08:31:45 Shaggy

相同的css的類選擇器不工作的多個組合

回答

相關問題