Question

当我尝试为基于css类选择器的某些div应用简单的CSS时，其中不同的选择器组合具有相同的css样式，但它没有得到应用。如果我为每个选择器组合单独写这个css，那么它正在工作。我无法理解为什么会失败。如果我的CSS选择器工作，那么“Left DIV | Left Score”应该转到右侧。

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>

Answer 1

您需要用逗号（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

Answer 2

单个选择器应以逗号分隔，而不是空格分隔。 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＆amp;类的.score-box-home .Soccer这是另一个div的（大）孩子，其中包含.team-info，.team-final-in-info，.lpanel＆amp; .Soccer which is itself a (grand)child of a的div with the classes。团队信息,。团队预信息,。lpanel &。Soccer`。

用于多个类选择器组合的css不相同

2 个答案: