我的跨度有什么区别？

Question

I have two spans inside my echo:

echo '<div class="elementsDiv" id="'.$row['objekt_nr']."_".$row['element_nr'].'" data-weight="'.$row['vikt'].'"  data-nr="'.$row['element_nr'].'" style="width: '.$langd.'px; height: '.$bredd.'px;><span class="elementDivNr">'.$row['element_nr'].'</span><span class="elementDivWeight">'.round($viktT, 2).' t</span></div>';

Span with class: "elementDivNr" & span with class: "elementDivWeight".

I try to set a background color for the spans with CSS:

span.elementDivNr{
  background-color: red !important;
}
span.elementDivWeight{
  background-color: red !important;
}

Now... why is only one of them getting the red color background? How can I search for "overrides"?

My code is pretty big in both CSS and JS as this is a "DnD" application.

UPDATE
It is strange is that I cannot access this span at all with CSS.

span.elementDivNr{
  background-color: red !important;
  font-size: 14px;
}

Changing font size has no effect either.

UPPDATE

https://jsfiddle.net/1u8evdr8/

Answer 1

You are missing a closing " on your style tag of your DIV.

So this:

echo '<div class="elementsDiv" id="'.$row['objekt_nr']."_".$row['element_nr'].'" data-weight="'.$row['vikt'].'"  data-nr="'.$row['element_nr'].'" style="width: '.$langd.'px; height: '.$bredd.'px;><span class="elementDivNr">'.$row['element_nr'].'</span><span class="elementDivWeight">'.round($viktT, 2).' t</span></div>';

Should be this:

echo '<div class="elementsDiv" id="'.$row['objekt_nr']."_".$row['element_nr'].'" data-weight="'.$row['vikt'].'"  data-nr="'.$row['element_nr'].'" style="width: '.$langd.'px; height: '.$bredd.'px;"><span class="elementDivNr">'.$row['element_nr'].'</span><span class="elementDivWeight">'.round($viktT, 2).' t</span></div>';