控制样式被覆盖

Question

我有以下ASP.Net代码

...
<div style="width: 40%; float: left; margin-left: 15px">
    <b>County:</b>
    <asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
    AutoCompleteMode="SuggestAppend" CssClass="EPSCombo">
    </asp:ComboBox>
    <br />
...

问题：此div包含许多组合框，并且它们未按预期显示，它们都具有EPSCombo类。当我调试CSS时，我发现它被覆盖了，这是FireBug的输出

我的EPSCombo样式如下（覆盖默认的AjaxToolkit CSS）

.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    height: 18px;
}
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    margin: 0;
    padding: 0;
    background-image: url(../images/windows-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 21px;
    width: 21px;
}
.EPSCombo .ajax__combobox_itemlist
{
    border-color: #7F9DB9;
}

包含EPSCombo的CSS文件是Master页面中包含的最后一个。

问题：自从我进行网络开发以来可能已经有一段时间了，但如果我决定控件的CSS类不应该具有最高优先级并且应该覆盖其他所有内容，那么正确吗？如果是这样，那么为什么我的组合框样式（高度，宽度，边距和填充）被覆盖？我没有任何其他样式类来设置Firebug中显示的那些值的高度和宽度。

在Loki的回答之后

更新我认为我应该添加这个，将!important添加到这些属性可以解决问题，但我想找到这个的根本原因，看看事情在哪里出了问题。

Answer 1

你的ComboBox可能会从它所包含的<div>继承它的样式，或者从高于它的div继承它的样式。由于您没有为其包含的div指定“类”或“ID”属性，因此如果您有类似的内容，则该div可能正在从CSS文件中检索样式：

div
{
  height: 21px;
  margin: 0px;
  padding: 0px;
  width: 21px;
}

要强制您的ComboBox采用独立样式，您可以使用asp style属性，如下所示：

<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>

这应该是可能干扰您的应用程序的任何其他样式的最高优先级。虽然被认为是不恰当的编程实践，但它可能会帮助您缩小问题范围。

干杯，埃里克

编辑我还应该提一下，您的CSS代码按照从最具体到最不具体的标签定义的顺序进行解释。例如，div.menu比div更具体，这可能发生在样式表的其他位置。

This也是一篇很好的文章来描述继承。希望这有帮助！

Answer 2

快速修复 - 在样式表中添加!important标记。它们将优先于其他所有内容，除非有其他标志定义同一元素的相同属性