Тот же css для нескольких комбинаций селектора классов не работает

Когда я пытаюсь применить простой CSS для некоторых divs на основе селекторов классов css, где у разных комбинаций селекторов одинаковый стиль css, он не применяется. Если я пишу этот css отдельно для каждой комбинации, то он работает. Я не могу понять, почему он терпит неудачу. Если мой селектор CSS работает, то «Left DIV | Left Score» следует перейти в правую сторону.Тот же 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; 
}

Дополнительная информация: http://www.w3schools.com/cssref/sel_element_comma.asp

источник

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

ищет div с классами .score-box, .score-box-home & .Soccer, что есть (великое) ребенка другого div с классами .team-info , .team-final-in-info, .lpanel & .Soccer which is itself a (grand)child of a ДИВ with the classes .team-инфо , .team предусилителя-инфо , .lpanel & .Soccer`.

источник

2016-04-26 08:31:45 Shaggy

Тот же css для нескольких комбинаций селектора классов не работает

ответ

Смежные вопросы