CSS多种添加剂样式应用于单个元素

Question

我有很多div有一个输入，我正在尝试设计它们。 div是弹出窗口，并且从一般到特定类别作为弹出窗口，弹出窗口的类型，在这种情况下的下拉列表，然后是下拉类型，在这种情况下的MS（婚姻状况）。每个级别的区别都需要特定的额外样式。

<div id="ea-MSPopup" class="ea-popup ea-dropdownlist ea-MSPopup" style="display:none;">
    <input type="text"/>
    <input type="text"/>
</div>

我有这个CSS：

.ea-popup {border: 0; background-color: Yellow;}
.ea-dropdownlist input { border: 0; background: Yellow;}
.ea-MSPopup  /* not applied */ { width:65px; height: 40px; }
.ea-MSPopup input  /* not applied */ { width:65px; }

未应用.ea-MSPopup和.ea-MSPopup输入。如果我添加这样的id它可以工作，但我不想使用id：

#ea-MSPopup  /* applied */ { width:65px; height: 40px; }
#ea-MSPopup input  /* applied */ { width:65px; }

我也尝试了这个：

.ea-popup.ea-dropdonlist.ea-MSPopup  /* not applied */ { width:65px; height: 40px; }
.ea-popup.ea-dropdownlist.ea-MSPopup input  /* not applied */ { width:65px; }

我曾经想过应该蛮力，但事实并非如此。

虽然我想知道如何更多地执行此特定案例，但有人可以提供解释或指向一个可读资源，清除我确定您知道我不会看到...